when I create this error appear I'm not sure hot fix it.
I ready build a web app and then I just create a store.
enter image description here
/store/index.js
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
title: "My custom title"
},
mutations: {},
modules: {},
actions: {}
});
main.js
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router/routes";
import Navbar from "./components/Navbar";
Vue.component("Navbar", Navbar);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App)
}).$mount("#app");
Check if your packages versions are compatible with each other. Don't want to be guessing but looks like you have too new Vuex for Vue 2.
Try installing Vuex in version 3.
Related
I'm just learning state management of VueJs And I stuck on that, if any one know please let me know
How can I render $store in my Vue component
When I console the $store its undefined
main.js
`
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import vuetify from './plugins/vuetify';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
vuetify,
store,
render: (h) => h(App),
}).$mount('#app');
console.log(store.state.test.name);
`
index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
test: { name: 'sagar' },
},
});
HomeView.vue
`
<template>
<v-main>
<p>{{ $store.state.test.name }}</p>
</v-main>
</template>
<script>
export default {
name: 'HomeView',
components: {},
};
</script>
`
this codes show errors on console.
This is the same issue as reported here:
https://stackoverflow.com/a/74478963/8112090
you need to use Vuex 3, which works with Vue 2:
https://v3.vuex.vuejs.org/
The tutorial needs to be updated since Vue 4 is not compatible with Vue 2 anymore.
I using vuetify : https://vuetifyjs.com/en/
I want to use moment.js. So I read this reference : https://www.npmjs.com/package/vue-moment
I had run npm install vue-moment
I'm still confused to put this script Vue.use(require('vue-moment'));
In the vuetify, there exist two file : main.js and index.js
main.js like this :
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
index.js like this :
import Vue from 'vue';
import Vuex from 'vuex';
import dataStore from './modules/data-store';
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug = process.env.VUE_APP_DEBUG !== "production";
export default new Vuex.Store({
modules: {
dataStore
},
strict: debug,
plugins: debug ? [createLogger()] : []
});
where do i put Vue.use(require('vue-moment'));?
I try to put it in the main.js, but if i call my vue component, there exist error : ReferenceError: moment is not defined
My vue component like this :
<template>
...
</template>
<script>
export default {
mounted() {
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
};
</script>
I found this at the bottom of the vue-moment npm page
vue-moment attaches the momentjs instance to your Vue app as
this.$moment.
This allows you to call the static methods momentjs provides.
So you should be able to use your original configuration of vue-moment and do this in your mounted() method
mounted() {
let a = this.$moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
notice this.$moment
And for the set up of vue-moment you should place this in your main.js file
main.js
Vue.use(require('vue-moment'))
=========================================================================
GLOBAL
If you want to use moment with Vue globally you can create an Instance Proprety
main.js
import moment from 'moment'
Vue.prototype.moment = moment
In your component you then call this.moment in your methods or computed properties. In your mounted section it would look like this
mounted() {
let a = this.moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
COMPONENT
If you just want to use moment in a component you can include directly like this
<script>
import moment from 'moment'
export default {
mounted(){
let a = moment("2012-02", "YYYY-MM").daysInMonth();
console.log(a)
}
}
</script>
I am using Vuejs with Webpack.
Here's store.js:
import Vuex from "vuex";
export default new Vuex.Store({
state: {
count : 0
},
mutations: {
increment (state) {
state.count++
}
}
});
Here is my app.js:
"use strict";
import Vue from 'vue';
window.Vue = Vue;
import MyComponent from './MyComponent.vue';
import store from './store.js';
window.App = new Vue({
el : '#my-app',
store,
components : {
'my-component' : MyComponent
}
});
Here is the script from MyComponent.vue:
export default {
computed : {
count() {
return this.$store.state.count;
}
},
mounted() {
console.log(this.$store)
}
}
Any reference to this.$store in my component is undefined. Why?
You need to install the Vuex plugin somewhere to allow Vue components to access the store. As Pavan noted, to do this you must include the following lines somewhere (in your app's index.js, in your store.js etc) before you create your Vue instance:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
This tells Vue what to do with the store instance when you create the instance, which will make it available under this.$store in your components. This also ensures that Vuex also knows how to interact with Vue. Without it, you will not be able to use Vue and Vuex together properly.
Regarding your later answer, you can export the store instance just fine, and import it into your index.js, router config etc. For example:
store.js:
import Vuex from "Vuex";
export default new Vuex.Store({ /* store config */ });
MyComponent.vue's <script> block:
export default {
mounted() {
console.log(this.$store); // will log the store instance
}
}
index.js:
import Vue from "vue";
import Vuex from "vuex";
import store from "./store";
import MyComponent from "./components/MyComponent.vue";
Vue.use(Vuex);
const app = new Vue({
el: "#my-app"
store,
components: { MyComponent },
// any other options as needed
});
You should add these 2 lines in your store.js
import Vue from "vue";
Vue.use(Vuex);
There's no way you can instantiate store without actually saying the second statement above. So, you need to import Vue in your store.js
OK, so the reason I wanted to go down this path was to separate the store code from the rest of the application.
I have managed to do that by exporting a default object from store.js, where that object is only the configuration for the store (i.e. not a store instance). I then instantiate the store in my app.js, using the imported configuration.
I will leave this answer open for a few days in case someone wants to provide a way to export/import the instance itself.
Right now, I'm trying to show the contents of state object from store.js on my App.vue.
I've tried vuex examples on Medium and other website, but I'm keep failing: non of them worked: some of them even gave me a WebPack config error.
My App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>TEST</h1>
</div>
</template>
<script>
import Store from './store/index'
export default {
name: 'App',
Store
}
</script>
My store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
alpha: ['1st data']
},
mutations: {
ADD ({ alpha }) {
const beta = 'new!'
state.alpha.push(beta)
}
}
})
My main.js
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import store from './store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
You shouldn't be importing the store in App.vue. It only needs to be included in main.js and passed as an option when constructing the Vue instance. Within a component, the store is thereafter accessible via this.$store.
Second, your mutation should receive a context object as it's first parameter. context consists of properties such including state and commit. Those are the ways in which you access state within a mutation.
// notice context is the first parameter
mutations: {
ADD (context, { param }) {
const beta = 'new!'
context.state.alpha.push(beta)
})
}
// you can also deconstruct context like this
mutations: {
ADD ({state}, { param }) {
const beta = 'new!'
state.alpha.push(beta)
})
}
I also changed the way alpha to param. You don't receive the state's properties unless you destructure even further.
The problem is that in your main.js is missing Vue.use(veux)
you should have something like this:
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import store from './store'
Vue.use(Vuex) // <-- Add this
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})
I'm creating a counter using Vue & Vuex 2.
When trying to access the count property on the store object, using this.$store.state.count, I get an Cannot read property 'state' of undefined error.
The error doesn't show up and everything works just fine when I'm creating the store instance inside main.js, instead of importing it.
main.js
import Vue from 'vue'
import Vuex from 'Vuex'
import App from './App.vue'
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
store.js
import Vue from 'Vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1
}
});
Counter.vue
export default {
name: 'counter',
template: `<span>{{ count }}</span>`,
computed: {
count () {
return this.$store.state.count
}
},
}
Any idea what's wrong with the store import?
You have imported vue differently:
import Vue from 'Vue'
within store.js and
import Vue from 'vue'
within main.js
change your store.js import to match main.js to fix the issue, i.e.
import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1
}
});
you can also remove the Vuex import in main.js