基础版

一、仓库

1.主仓库

// store/index.js
import Vue from "vue";
import Vuex from "vuex";// 引入子仓库
import home from './modules/home.js'Vue.use(Vuex);const state = { //要设置的全局访问的state对象,赋予初始属性值index: 'home',isIndex: false,
};const getters = {   //实时监听state值的变化(最新状态)getIsIndex(state) {  //定义函数，返回处理过的val，命名最好有代表性return window.location.hash.split('/')[1] === state.index},
};const mutations = {//自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);// clearCatch(state, val) {//   console.log(state, val)// },
};const actions = {//自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性// clearCatchAction(context, val) {//   context.commit('clearCatch', val);// },};export default new Vuex.Store({strict: true, // 此模式下所有的状态变更（即更新state）必须使用mutationstate,getters,mutations,actions,modules: {home}
});

2.子仓库

namespaced为true时才是代码和逻辑上的子仓库，否则仅是代码上的子仓库

// store/modules/home.jsconst state = {};const getters = {};const mutations = {};const actions = {};// 注意和仓库的区别
const store = {// namespaced用于在全局引用此文件里的方法时标识这一个的文件名，使得让人明白这些数据来自哪个仓库// 即当你需要在别的文件里面使用子仓库(mapStates、mapGetters、mapActions)时，里面的方法需要注明来自哪一个模块的方法// 若未设置默认是false，即子仓库的数据也视为全局仓库中的数据，此时的‘子仓库’仅仅是代码上的分割namespaced: true,state,getters,mutations,actions
}
export default store;

二、使用

1.全局（index.js和未开启命名空间的子仓库）

this.$store.state.isIndex

this.$store.getters.getIsIndex

this.$store.commit(‘clearCatch’,‘all’)

this.store.dispatch(‘clearCatchAction’,‘all’)

2.子仓库（子仓库定义了namespaced: true），仓库名：home

this.$store.state.home.isIndex

this.$store.getters[‘home/getIsIndex’]

this.$store.commit(‘home/clearCatch’,‘all’)

this.store.dispatch(‘home/clearCatchAction’,‘all’)

3.使用strict严格模式（建议）

export default new Vuex.Store({strict: true,// 此模式下所有的状态变更（即更新state）必须使用mutationstate: {...},...
}

此模式下所有的状态变更（即更新state）必须使用mutation（commit），如果在组件中直接修改state则会报错。这样的好处是所有的state的更新都体现在仓库中，整改方便；使用devTools调试工具时可以跟踪到状态的修改。

三、批量使用

1、全局

1.sate的辅助函数

一般是写在computed里面

mapState(*)

数组映射

 computed: {// 3. mapState需要接收数组作为参数，数组的元素是需要映射的状态属性// 会返回一个对象，包含两个对应属性计算的方法// { count: state => state.count, msg: state => state.msg }// 然后这里使用扩展运算符展开对象，完成之后我们就有了count和msg两个计算属性...mapState(['count', 'msg'])}

字典映射（可起别名防止冲突）

computed: {// mapState可以传对象，键是别名，值是映射的状态属性...mapState({ num: 'count', msg:'msg' })}

获取数据时进一步处理

...mapState({  msg:state=>state.msg + '。'}),

映射后使用：this.msg

2.getters的辅助函数

一般也是写在computed里面

mapGetters(*)

数组映射

 computed: {...mapGetters(['getCount', 'getMsg'])}

字典映射（可起别名防止冲突）

computed: {...mapGetters({ num: 'getCount', getMsg:'getMsg'})}

映射后使用：this.getMsg

3.mutations的辅助函数

一般是写在methods里面

mapMutations(*)

数组映射

 ...mapMutations(['clearCatch'])

字典映射

 ...mapMutations({clear:'clearCatch'}])

映射后使用：this.clearCatch(‘all’)

4.actions的辅助函数

一般也是写在methods里面

mapActions(*)

数组映射

 ...mapActions(['clearCatchAction'])

字典映射

 ...mapActions({clearAction:'clearCatchAction'}])

映射后使用：this.clearCatchAction(‘all’)

2、子仓库

同上，只是第一个参数是子仓库名称（并且子仓库namespaced为true时）

1.sate的辅助函数

mapState(‘name’,*)

数组映射

 computed: {...mapState('home',['count', 'msg'])}

字典映射（可起别名防止冲突）

computed: {...mapState('home',{ num: 'count', msg:'msg' })}

获取数据时进一步处理

...mapState('home',{  msg:state=>state.msg + '。'}),

映射后使用：this.msg

2.getters的辅助函数

一般也是写在computed里面

mapGetters(‘name’,*)

数组映射

 computed: {...mapGetters('home',['getCount', 'getMsg'])}

字典映射（可起别名防止冲突）

computed: {...mapGetters('home',{ num: 'getCount', getMsg:'getMsg'})}

映射后使用：this.getMsg

3.mutations的辅助函数

一般是写在methods里面

mapMutations(‘name’,*)

数组映射

 ...mapMutations('home',['clearCatch'])

字典映射

 ...mapMutations('home',{clear:'clearCatch'}])

映射后使用：this.clearCatch(‘all’)

4.actions的辅助函数

一般也是写在methods里面

mapActions(‘name’,*)

数组映射

 ...mapActions('home',['clearCatchAction'])

字典映射

 ...mapActions('home',{clearAction:'clearCatchAction'}])

映射后使用：this.clearCatchAction(‘all’)