概念
为Vue.js程序开发的一套状态管理器
State
项目的数据源，整个项目的状态都保存在state里面。
state:{number:123,name:'bulang',sex:'boy',infos:[{name:'kaisa',sex:'boy'},{name:'jiecaowa',sex:'girl'}] }
组件中获取state的方法：
this.$store.state.key
使用辅助函数mapState()把state里面的值映射为组件的计算属性并展开，在组件的模板里面便可以直接使用：
computed:{ ...mapState(['key']),}
Mutation
提交mutation是唯一可以改变state的方法；
第一个参数为state，第二个参数为自定的参数payload；
使用同步方式操作state，否则由于异步数据无法追踪导致devtools记录的历史快照会出问题；
// 例：mutations:{add:(state, payload)=>{ state.number+=payload.gap; },reduce:(state, payload)=>{ state.number-=payload.gap; }}
组件中提交mutation的方法：
this.$store.commit('add',{gap:5})
使用辅助函数mapMutations()把对应的mutaions映射到组件的methods里面并展开，在组件的模板里面便可以直接使用：
// 例import{ mapMutations }from'vuex';exportdefault{name:"active",methods: { ...mapMutations(['add','reduce']) }, }
Action
主要作用：执行异步操作（如：接口请求等）并提交mutaion;
第一个参数为与Store实例一样具有相同方法的context对象，可以通过解构的方式获取对象上的方法；
第二个参数为自定义传的值；
actions之间可以互相派发；
// 例：actions:{toLog:({dispatch}, msg)=>{ dispatch('promiseLog',msg).then(()=>{console.log('success'); }).catch(()=>{console.log('error'); }) },promiseLog:({commit},msg)=>{returnnewPromise((resolve, reject)=>{consti = ~~(Math.random()*10);console.log(i)if(i<5){ commit('log',msg) resolve(); }else{ reject(); } }); }}
在组件中派发actions的方法:
this.$store.dispatch('toLog','yes')
使用辅助函数mapActions()把actions映射到组件的methods里面，然后在组件的模板里面直接调用
// 例：import{ mapActions }from'vuex';exportdefault{name:"active",methods: { ...mapActions(['toLog']) }, }
Getter
主要作用：对state数据进行加工，用来派生新的状态
第一个参数为state用来提供数据；
第二个参数可以传入其他的getters，使用其他getter加工后的数据；
可以在getter中返回一个函数，这样我们在使用的时候就可以传递参数，根据参数来决定返回的数据；
// 例：getters:{getInfo:state=>{return`my name is${state.name},${state.sex}`; },getCustomInfo:state=>index=>{return`my name is${state.infos[index]['name']},${state.infos[index]['sex']}`; }}
在组件中使用getters
this.$store.getters.getInfo
使用辅助函数mapGetters把getter映射到组件的computed里面，然后在组件模板中直接使用；
// 例：import{ mapGetters }from'vuex'exportdefault{name:'show',computed:{ ...mapGetters(['getInfo','getCustomInfo']) }}
Module
当项目足够大的时候，所有的state，mutaions，actions，getters放到一个文件里面会非常难维护，所以我们需要把state，mutaions，actions，getters分别提出来放到各自的文件并导出。
每个模块里面有各自的state，mutaions，actions，getters文件;
每个模块有一个index.js文件统一导出所有方法;
导出模块时可以指定是否使用命名空间，这样可以在组件中指定对应的模块来执行对应的操作;
在store的入口文件导入所有模块儿;
实例化Store时在modules里面传入模块;
使用辅助函数时，如果声明了使用命名空间，可以给辅助函数的第一个参数传入指定模块;
好了，今天的分享就到这里，如果你是正在学习前端或准备学习前端，可以去我的前端学习交流群免费下载一些前端学习视频，而且不定时还有大咖直播分享，希望能帮助大家共同成长。