Vue-build Vuex development environment

1 Install Vuex

Before installation, you need to understand a version problem. In vue2, you need to use version 3 of vuex. In vue3, you need to use version 4 of vuex. You must strictly follow the requirements of this version, otherwise there will be various unexpected problems, such as the following Installation error, even because of the version problem

There are several ways to install, I use npm installation here

npm

npm install vuex@next --save

Yarn

yarn add vuex@next --save

I use vue2 here, so I installed version 3 of vuex, opened the terminal, and entered:

vue_test>npm i vuex@3

2 Using Vuex

After the installation is complete, you can import and use. Here, the v of Vuex can be uppercase or lowercase. The official website document is uppercase. It is not wrong to have to lowercase. It is just a naming problem

// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)

3 Use virtual store

After the step of using Vuex, you can pass in the store configuration item when creating vm or vc

In this way, each vc instance has a store object, but the values ​​in the current store are all false, so now we need to create (encapsulate) a real store

4 create store

There are two ways to create a store

first approach

You can create a folder called vuex in the src directory of the project, and then create a new store.js in it, so that others can know that vuex technology is used at a glance, and the store is created here. Although this method is clear, it is not official recommended

The second approach

Create a folder called store in the src directory of the project, and create index.js. Although vuex is not reflected, seeing store in src is equivalent to seeing vuex. This method is also recommended by the official website

Both of these methods are fine, but the official website recommends the second method of seeding, so here I use the second method

5 Expose (export) store

Write relevant code in index.js

// 该文件用于创建Vuex中最为核心的store

// 引入Vuex
import Vuex from 'vuex'

// 准备actions 用于相应组件中的动作
const actions={}
// 准备mutations 用于操作数据(state)
const mutations={}
// 准备state 用于存储数据
const state={}
// 创建并暴露(导出)store 
export default new Vuex.Store({
    // 准备store里面的三大元素 这里key和value重名,可以使用简写形式 比如:action,mutations,state 这里我不想采用简写形式
    actions:actions,
    mutations:mutations,
    state:state
})

6 Introduce and use real store

Now that the real store is ready, we can introduce the real store and replace the fake store we wrote above

Here the store triggers the abbreviation, but I did not omit it, personally I am not used to this abbreviation

Such a real store is created, configured and referenced, and there is a store object on the vc or vm instance

7 Solve the problem of scaffolding parsing import statements

It seems that the basic work is done, but the browser reports an error. It seems to be a problem of calling before and after, but it is actually a problem of scaffolding parsing the import statement.

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

At this time, we can change our thinking and write use into index.js, so that main.js only needs to import and prepare the store

At this time, check the store again, find the error message and each vc or vm has a real store

And see related APIs such as dispatch and commit, which means that it can be operated with vuex

At this point, the development environment of Vuex is completed, which means that vuex can be used. The code is as follows:

index.js

// 该文件用于创建Vuex中最为核心的store

// 引入Vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)
// 准备actions 用于相应组件中的动作
const actions={}
// 准备mutations 用于操作数据(state)
const mutations={}
// 准备state 用于存储数据
const state={
    sum:0 //总和
}
// 创建并暴露(导出)store 
export default new Vuex.Store({
    // 准备store里面的三大元素 这里key和value重名,可以使用简写形式 比如:action,mutations,state 这里我不想采用简写形式
    actions:actions,
    mutations:mutations,
    state:state
})

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入store
import store from './store/index'
// 关闭Vue的生产提示
Vue.config.productionTip=false
// 创建vm 
const vm=new Vue({
    el:'#app',
    render:h=>h(App),
    store:store,
    beforeCreate(){
        Vue.prototype.$bus=this
    }
   
})

8 Summary of building the vuex environment

1 Create a file:src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
        actions,
        mutations,
        state
})

2 Pass in configuration items main.jswhen creating a vm instore

......
//引入store
import store from './store'
......

//创建vm
new Vue({
        el:'#app',
        render: h => h(App),
        store
})