Vuex使用流程

1.使用Vuex的目的是实现多组件的状态管理。当多个组件需要共享数据时，Vuex是个好帮手。2、Vuex的5个核心中state和mutation是必须的，其他的可以根据需要添加。1.state负责状态管理，类似于vue中的data，用于初始化数据2.mutation专门修改state中的数据，由commit触发3.action可以处理异步，由dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commitTriggermutation，通过mutation修改state状态值4.getterVuex中的computed属性，相当于vue中的computed，依赖于state状态值。一旦state值发生变化，getter会重新计算，也就是当一个数据依赖于另一个数据时，一条数据发生变化，就需要使用getter5.module模块化管理3.如何使用Vuex1.首先，的当然，你必须安装它（假设你已经安装了vue）npminstallvuex2.引入并使用VueximportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)3.实例化一个Vuex对象--Storestatemachine并抛出conststore=newVuex.Store({})exportdefaultstore4.在main.js中引入并注入VueximportVuefrom'vue'importAppfrom'./App.vue'importstorefrom'./store'newVue({render:h=>h(App),store}).$mount('#app')5.通过this.$store访问Vuex的数据，此时Vuex就准备好了，接下来根据添加数据自己需要~4.示例代码1.首先至少准备两个组件，不然怎么共享数据exportdefault{}2.在store.js中写Vuex相关代码importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({state:{},//状态管理mutations:{},//修改状态动作:{},//异步operationgetters:{},//计算属性modules:{}//Module})exportdefaultstore注意：别忘了在main.js中注入store（参考上面第三点的第四点）3.假设我们现在需要共享一个data数据，初始值为0...conststore=newVuex.Store({state:{data:0}})...4.组件1和组件2都可以通过获取$storeTodata

5.那么如何修改数据，这时候mutation就是需要。Mutation本质上是一个函数，在接收state调用params参数mutations:{changeDataMut(state,params){state.data=params}}6.mutation有了，接下来需要在组件，记得使用commit来触发7.如何使用action？Action也是一个函数前面说了，action不能直接修改state。首先action必须在component中通过dispatch触发，然后action函数中的commit才会触发mutation，通过mutation可以修改state值。注意action参数actions:{changeDataAct(context,params){//context是一个对象，从中解构出我们需要的commit方法let{commit}=contextcommit('changeDataMut',params)}}这时候动作可以在组件中触发，注意使用dispatch8.getter的使用getter计算的属性，依赖于state值，需要返回现在我们假设一个值double，它是数据的两倍，并且会随着数据的getters而改变:{doubleGet(state){returnstate.data*2}}我们可以在组件