这篇文章会让你明白什么是vuex

这篇文章会让你明白什么是vuex，为什么会有Vuex？Vuex是专门为Vue.js应用开发的状态管理模型。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex是一个集中管理组件依赖的共享数据的工具，可以解决不同组件之间的数据共享问题。结论要修改状态状态，必须使用突变来执行同步代码。ajax、timer等代码不能在mutation中执行异步代码。必须通过action和提交数据到mutations来完成state的状态，即共享数据。可以在组件中调用actionvuexbase-initialization函数新建一个脚手架项目。在项目中应用vuex$vuecreatedemo，开始vuex的初始化。选择模式时，选择默认模式初始化：第一步：npmivuex--save=>Installedtorun-timedependencies=>项目上线后仍然使用的依赖，开发时的依赖=>开发调试时使用的依赖是开发时需要的依赖，运行时依赖，项目上线第二步运行时仍然需要：importVuexfrom'vuex'inmain.js第三步：Vue.use(Vuex)=>在main.js中调用vuex中的install方法第四步：conststore=newVuex.Store({...configurationitem})第五步：在根实例中配置store选项指向store实例对象importVuefrom'vue'importVuexfrom'vuex'Vue.use(vuex)conststore=newVuex.Store({})newVue({el:'#app',store})vuexbase-statestate是放置所有公共状态的属性，如果你有公共状态数据,只需要在state对象中定义definestate//初始化vuex对象conststore=newVuex.Store({state:{//管理数据count:0}})如何获取组件中的计数？App.vue组件中的原始形式——插值表达式可以使用.$store获取vuex中的store对象实例，可以通过state属性属性获取count，如下

计算属性-在计算属性中定义状态属性middle//在组件中的computed属性中定义state中的数据computed:{count(){returnthis.$store.state.count}}function-mapStatemapState是一个辅助函数，可以帮助我们将存储中的数据映射到组件的计算属性。是一个方便的用法用法：第一步：importmapStateimport{mapState}from'vuex'第二步：使用数组形式引入state属性mapState(['count'])上面代码的最终结果类似于count(){returnthis.$store.state.count}第三步：使用扩展运算符将导出的状态映射到计算属性computed:{...mapState(['count'])}vuexfoundation-mutationsstate数据只能通过mutations来修改，mutations必须同步更新，目的是形成一个数据快照datasnapshot：一旦一个mutation被执行，一个viewstate是立即获取的，因为是立即的，所以必须同步定义。conststore=newVuex.Store({state:{count:0},//定义mutationsmutations:{}})格式描述mutations是一个对象，里面存放了修改state的方法mutations:{//第一个参数方法中是当前store的state属性//调用mutaiions时可以传payload传输参数parametertransferloadaddCount(state){state.count+=1}},组件原形如何调用mutations-$store新建一个组件child-a.vue，内容是一个button按钮，点击按钮调用mutations传递参数addCount(state,payload){state.count+=payload}this.$store.commit('addCount',10)辅助函数-mapMutationsmapMutations与mapState非常相似，它提取位于mutations中的方法，我们可以将其导入..mapMutations(['addCount'])}上面代码的意思是将mutations的方法导入methods中，相当于methods:{//commit(方法名,加载参数)addCount(){this.$store.commit('addCount')}}此时可以直接调用this.addCount+100但是注意：异步代码不能写在Vuex中的mutations，如果有异步的ajax请求，应该放在actions里面异步数据上下文表示当前存储实例可以通过context.state获取状态，可以通过context.commit提交mutation，也可以通过context.diapatch调用其他actiongetAsyncCount(context){setTimeout(function(){//一秒后，需要给修改状态的数字context.commit('addCount',123)},1000)}}原始调用-$storeaddAsyncCount(){this.$store.dispatch('getAsyncCount')}calladdAsyncCount(){this.$store.dispatch('getAsyncCount',123)}辅助功能——mapActions动作也有辅助功能，可以将动作导入组件import{mapActions}from'vuex'methods:{...mapActions(['getAsyncCount'])}直接通过这个。方法可以调用+asynchronousvuexfoundation-getters除了state，有时候我们需要从state中导出一些状态，这些状态依赖于state，这时候,吸气剂将被使用。比如state中定义了list，是一个1-10的数组，state:{list:[1,2,3,4,5,6,7,8,9,10]}组件，需要显示所有大于5的数据。正常的做法是list需要在组件中做进一步的处理，但是getters可以帮我们实现。definegettersgetters:{//getters函数的第一个参数是state//必须有一个返回值filterList:state=>state.list.filter(item=>item>5)}使用getters的原始方式——$store<分区>{{$store.getters.filterList}}