Menu
I'm in Vue 3, I started with adding a new Vuex.Store to vue, but I continuously get this javascript error. I also tried the same thing with createStore since I use Vue 3, but it's still the same.
What am I missing?
const store = new Vuex.Store({
modules: {
account: {
namespaced: true,
state: () => ({ }),
getters: {
isAdmin () { }
},
actions: {
login () { }
},
mutations: {
login () { }
}
}}
});
Than I add to Vue as store:
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
What am I missing?
Complete error
vuex.esm-browser.js?5502:644 Uncaught TypeError: Object(...) is not a function
at resetStoreState (vuex.esm-browser.js?5502:644)
at new Store (vuex.esm-browser.js?5502:387)
at createStore (vuex.esm-browser.js?5502:337)
at eval (main.js?56d7:37)
at Module../src/main.js (app.js:1105)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at Object.1 (app.js:1118)
at __webpack_require__ (app.js:849)
at checkDeferredModules (app.js:46)
912
A "store" is basically a container that holds your application state. There are two things that make a Vuex store different from a plain global object: Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes.
In the previous Vuex tutorial, we learned that by default, getters, actions, and mutations inside modules are registered under the global namespace, which allows multiple modules to react to the same mutation or action.
The short answer is: Yes. Vuex is the preferred state management solution for Vue apps, and Vuex 4 is the version compatible with Vue 3. Do take note, however, that using Vuex for state management depends on the complexity of your application.
The first part of this Vuex Store tutorial is creating a store. A store is simply a container where you want to store your application data. Furthermore, this store is accessible natively in all your components, regardless of their location. In the end, the store is just a container of variables and functions to modify them.
To call an action from a component you we use the dispatch function. As we have already seen in our vuex store tutorial, state stores information. However, we might want to use some information that derives directly from the state. In other words, we might want to have computed properties in our vuex store as well.
Vuex this.$store.commit is not a function - Get Help - Vue Forum Hello, I am quite new to Vue, but am stuck on a simple example setup within the context of a Meteor application (not sure if the Meteor context is relevant or not to my issue though).
Vue will “install” our Vuex Store inside its engine, and make it available to any component in our app. Thus, in our methods and computed properties of each component, we can access the state of the store in read-only. To access a state, simply use the following code.
If you are using Vue 3 you need to use Vuex 4.
import { createStore } from 'vuex'
import { createApp } from 'vue'
const store = createStore({
state () {
return {
count: 1
}
}
})
const app = createApp({ /* your root component */ })
app.use(store)
https://vuex.vuejs.org/guide/#vuex-4-x-for-vue-3
126
npm uninstall vuex
npm install [email protected]
// Convert version to 3.4.0 Can perfectly solve this problem
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
