vuex模块化编码

安装vuex：

vue2只能用vuex3版本：

npm i vuex@3

vue3只能用vuex4版本： 

npm i vuex@4

引入vuex

在src中创建一个新文件夹store，在store中创建index.js文件，在index.js中引入vue和vuex并应用vuex插件，将不同功能相关的配置写在不同的js文件中，如count.js和person.js分别对应Count.vue和Person.vue。

在每个配置文件中写入如下相关配置：

 

actions通过执行commit()来触发mutations的调用，间接更新state，可包含异步代码（定时器、ajax等）

mutations通过actions中commit触发，只能包含同步的代码，不能写异步代码。

state用于存储数据，是唯一的。

getters包含多个计算属性(get)的对象，将state中的数据进行加工。

在index.js中创建并暴露store，引入相关配置文件

如图，其中a，b为自己取的名字，直接用es6语法将a:countOptions写为countOptions。

 

在main.js文件中引入并配置store，如下图所示。

 

 在组件中使用vuex：

actions（在methods中写）：

（1）直接调用：

this.$store.dispatch('a/addOdd',this.n)

 

（2）借助mapActions生成对应的方法的两种写法---有命名空间

mutations（在methods中写）:

（1）直接调用：

this.$store.commit('a/ADD',this.n)

 

（2）借助mapMutations生成对应的方法的两种写法---有命名空间

 

state（在computed中写）：

（1）直接调用：

 

return this.$store.state.a.sum

（2）借助mapState生成计算属性的两种写法---有命名空间

getters（在computed中写）：

（1）直接调用：

return this.$store.getters['a/bigSum']

（2）借助mapGetters生成计算属性的两种写法---有命名空间

         

注：使用mapXXX时需要在对应script中引入：

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'