1.1了解Vuex1.1.1Vuex的概念：Vue中集中状态（数据）管理的Vue插件，集中管理Vue应用中多个组件的共享状态（读/写），也是组件之间的一种通信方式，适用于任何组件之间的通信。Github地址1.1.2何时使用Vuex多个组件依赖同一个状态不同组件的行为需要改变同一个状态1.1.3Vuex工作原理图1.2搭建Vuex环境及基本使用1.2.1环境Vuex搭建创建文件：src/store/index.js//引入Vue核心库importVuefrom'vue'//引入VueximportVuexfrom'vuex'//应用Vuexplug-inVue.use(Vuex)//准备动作对象——响应组件中的用户动作constactions={}//准备突变对象——修改状态中的数据constmutations={}//准备状态对象——保存具体数据conststate={}//创建并暴露storeexportdefaultnewVuex.Store({actions,mutations,state})在main.js中创建vm时传入store配置项......//引入storeimportstorefrom'./store'......//CreatevmnewVue({el:'#app',render:h=>h(App),store})1.2.2初始化数据的基本使用，配置actions，配置mutations，运行文件store.js//引入Vue核心库importVuefrom'vue'//引入VueximportVuexfrom'vuex'//引用VuexVue.use(Vuex)constactions={//添加的action响应组件entjia(context,value){//console.log('jiainactions已被调用',miniStore,value)context.commit('JIA',value)},}constmutations={//执行加上JIA(state,value){//console.log('JIAinmutationshasbeencalled',state,value)状态。sum+=value}}//初始化数据conststate={sum:0}//创建并暴露storeexportdefaultnewVuex.Store({actions,mutations,state,})在组件中读取Vuex中的数据：$store修改.state.sum组件中Vuex中的数据：$store.dispatch('methodnameinaction',data)or$store.commit('methodnameinmutations',data)注意：如果没有网络请求或者For其他业务逻辑，action也可以在组件中跳过，即不写dispatch，直接写commit1.3Vuex核心概念和API1.3.1stateVuex管理状态对象应该是唯一的示例代码：conststate={sum:0}1.3.2actions的值是一个对象，包含多个响应用户操作的回调函数。使用commit()触发突变中函数的调用。如何间接更新状态以触发动作中的回调？在组件中使用：$store.dispatch('对应的动作回调名')触发器可以包含异步代码（定时器，ajax等）示例代码：constactions={//响应组件中添加的动作jia(context,value){//console.log('jiainactionshasbeencalled',miniStore,value)context.commit('JIA',value)},}1.3.3mutations的value是一个包含多个direct的对象updates谁可以调用状态方法中的方法？怎么打电话？实际使用：commit('对应的mutations方法name')来触发mutations中方法的特点：不能写异步代码，只能简单操作state示例代码：constmutations={//executionplusJIA(state,value){//console.log('JIAinmutationsCalled',state,value)state.sum+=value}}1.3.4Getters概念：当state中的数据在使用前需要处理时，可以使用getters进行处理在store.js中添加getters配置//准备getters-用于处理状态中的数据constgetters={bigSum(state){returnstate.sum*10}}//创建并暴露storeexportdefaultnewVuex。读取Store({......getters})组件中的数据：$store.getters.bigSum1.4四个map方法的使用1.4.1mapState方法mapState方法：用来帮我们映射state中的数据asCalculatedattributecomputed:{//用mapState生成计算属性:sum,school,subject(objectwriting)...mapState({sum:'sum',school:'school',subject:'subject'}),//借助mapState生成计算属性：sum,school,subject(数组写法)...mapState(['sum','school','subject']),},1.4.2mapGettersmethodmapGettersmethod:used帮我们mapgetters中的数据是一个计算属性mapGetters：bigSum(数组写入)...mapGetters(['bigSum'])},1.4.3mapActions方法mapActions方法：用来帮助我们生成带有动作的对话，即：包含$store.dispatch(xxx)方法：{//通过mapActionsgeneration:incrementOdd,incrementWait(objectform)...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})//由mapActions生成：incrementOdd,incrementWait(arrayformat)...mapActions(['jiaOdd','jiaWait'])}1.4.4mapMutations方法mapMutations方法：用来帮助我们生成带有mutation的对话的方法，即：include$store.commit(xxx)functionmethods:{//mapActions生成：increment，decrement（对象形式）...mapMutations({increment:'JIA',decrement:'JIAN'}),//mapMutations生成：JIA,JIAN(Objectform)...mapMutations(['JIA','JIAN']),}备注：使用mapActions和mapMutations时，如果需要传参：在模板中绑定事件时传参，否则传参事件对象1.5模块化+命名空间业务场景需要包含多个模块，一个模块就是一个存储配置对象，对应一个组件（包括共享数据）目的：让代码更容易维护，让多种数据分类更清晰模块化：修改store.jsconstcountAbout={namespaced:true,//打开命名空间state:{x:1},mutations:{...},actions:{...},getters:{bigSum(state){returnstate.sum*10}}}constpersonAbout={namespaced:true,//打开命名空间state:{...},mutations:{...},actions:{...}}conststore=newVuex.Store({modules:{countAbout,personAbout}})打开命名空间后，读取组件中的状态数据//方法一：直接读取this.$store.state.personAbout.list//方法二：借助mapState读取：...mapState('countAbout',['sum','school','subject']),打开命名空间后，读取组件中的getters数据//方法一：自己直接读取这个.$store.吸气剂['personAbout/firstPersonName']//方法二：用mapGetters读取：...mapGetters('countAbout',['bigSum'])打开命名空间后，在组件中调用dispatch//方法一：直接dispatchthis.$store.dispatch('personAbout/addPersonWang',person)//方法二：用mapActions:...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})打开命名空间后，在组件中调用commit//方法一：直接committhis.$store.commit('personAbout/ADD_PERSON',person)//方法二：使用mapMutations:。..mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
