Detailed explanation of Vuex environment

Build Vuex environment
Summarize

Build Vuex environment

Create a folder store in the src directory and create an index.js file in the store folder

index.js is used to create the core store in Vuex

// scr/vuex/index.js
 // Import Vuex
import Vuex from 'vuex'
 // Used to respond to actions in components const actions = {}
// Used to manipulate data const mutations = {}
// Used to store data const state = {}
 // Create a store
const store = new Vuex.Store({
    actions,
    mutations,
    state
})
 // Export store
export default store

// main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store/index'
 Vue.use(Vuex)
 new Vue({
    render:h => h(App),
    store
}).$mount('#app')

But this will result in an error:

[vuex] must call Vue.use(Vuex) before creating a store instance

Meaning : [vuex] Vue.use(Vuex) must be called before creating a store instance

Reason : When we import the store, the code of the imported file is executed first, so when the following code is executed, the imported file has been executed

In this case, let's swap the two lines of code: import store from './store/index' and Vue.use(Vuex)

But the actual result is: [vuex] must call Vue.use(Vuex) before creating a store instance , still error

Reason : This is a problem with the scaffold parsing import statements. The imported file will be placed at the beginning of the code, and then the code of this file will be parsed.

Correct way to write it:

// scr/store/index.js
 // Import Vuex and Vue
import Vuex from 'vuex'
import Vue from 'vue'
 // Apply Vuex plugin Vue.use(Vuex)
 // Used to respond to actions in components const actions = {}
// Used to manipulate data const mutations = {}
// Used to store data const state = {}
 // Create a store
const store = new Vuex.Store({
    actions,
    mutations,
    state
})
 // Export store
export default store

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
 new Vue({
    render:h => h(App),
    store
}).$mount('#app')

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Vue Vuex builds vuex environment and vuex sum case sharing
Vue Beginner's Guide: Environment Building and Getting Started
Detailed summary of Vue project environment construction
Build a Vue development environment
Simple tutorial on setting up vue environment
Vue2.0 from scratch_Environment construction steps
Detailed explanation of the simplest strategy for setting up a vue.js development environment
Step-by-step guide to build and install a Windows-based Vue.js runtime environment
Tutorial on setting up vue.js development environment
Vue project environment construction

<<: Parsing Linux source code epoll

>>: Detailed explanation of the use of base tag in HTML