小编经常在项目中使用Vuex。其实我只是知道Vuex是为了解决什么痛点而设计的，但是对于这个东西到底是怎么回事，我有点疑惑。一头雾水，小编昨天下定决心，认真看了Vuex的官网（https://vuex.vuejs.org/zh/）。还是有很多收获的。特意拿出来分享给大家。在大家以后的面试中，增加一些筹码和底气。Vuex是专门为Vue.js应用程序开发的状态管理模式。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex也被集成到Vue的官方调试工具devtoolsextension(opensnewwindow)中，提供了零配置穿越调试、状态快照导入导出等高级调试功能，这是官网对Vuex的描述.小编之前的项目经常使用Vuex来存储用户信息，比如当前用户id，用户所属部门，头像等，这些信息都是通过数据接口获取的。实际上，它们存储在用户浏览器的Cookie和LocalStorage中都是可用的。使用时，它们是从相应的本地位置获取的。当用户注销时，相应的信息被清除。也减少了多次请求，解决了共享多个组件的问题。数据痛点。但是许多成熟的管理员都在使用Vuex，而另一个著名的前端框架React也在使用类似的解决方案（Redux）。面对前端日新月异的发展，学会使用Vuex就显得尤为重要。Vuex主要分为四个部分，State、Getters、Mutations、Actions。下面小编就举例来一一讲解。在正式进入Vuex的世界之前，我们需要安装Vuexnpminstallvuex--save当我们使用脚手架搭建项目时，需要在项目入口文件main.js中引入Vuex，通过Vue.use()import安装Vuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)Vuex依赖于Promise，如果你还不知道Promise，可以查看我之前的文章《ES6中的Promise》1.StateVuex的核心是store，Store中的数据都是存储在State中的，State可以理解为一个大仓库，里面存放着我们需要共享的数据。在组件中，可以通过this.$store获取State中的数据。为了保证数据的一致性，不允许直接修改State中的数据。更改商店状态的唯一方法是显式提交（提交）以下内容让我们创建最简单的商店importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}})现在可以通过store.state获取state对象，通过store.commit方法触发state变化：store.commit('increment')console.log(store.state.count)//->1最后，我们需要将store注入到创建的Vue实例中，就像这样newVue({el:'#app',store//这个位置可以简写为object的key和value是一样的，使用es6语法所以})那么我们在Vue组件中如何显示state呢？由于Vuex的状态存储是响应式的，从存储实例读取状态的最简单方法是在计算属性中返回一些状态：//创建一个计数器组件constCounter={template:`
{{count}}
`,computed:{count(){returnstore.state.count}}}我们也可以constCounter={template:`
{{count}}
`,computed:{count(){returnthis.$store.state.count}}}其实有了上面的内容，我们就可以正常读取store中的值了，官方也给我们提供了更简单的方法：mapState//辅助在一个单独建的版本函数是Vuex.mapStateimport{mapState}from'vuex'exportdefault{//...computed:mapState({//箭头函数可以让代码更简洁count:state=>state.count,//传递字符串参数'count'等同于`state=>state.count`countAlias:'count',//为了能够使用`this`获取本地状态，您必须使用常规函数countPlusLocalState(state){returnstate.count+this.localCount}})}同样，在类似es6objects的扩展中，当key和value相同时，可以简写。同样的，mapState也提供了一个类似的使用方法computed：mapState([//mapthis.counttostore.state.count'count'])es6中出现展开运算符后，我们写起来更方便了，也是github上小编最常用的方式。computed:{localComputed(){/*...*/},//使用对象扩展运算符将这个对象混合成一个外部对象...mapState({//...})}二、Getters小编个人感觉那这个和一些后端语言类似，比如我们想在store中获取一个数组，当没有Getters的时候，我们需要在computed属性（computed）中写computed:{doneTodosCount(){returnthis.$store.state.todos.filter(todo=>todo.done).length}}这个例子比较简单。如果遇到比较复杂的情况，获取State中的数据后，需要做各种处理。想想js代码，头都大了。好在Vuex提供了Getters我们可以这样写conststore=newVuex.Store({state:{todos:[{id:1,text:'...',done:true},{id:2,text:'...',done:false}]},getters:{//通过Getters暴露doneTodosdoneTodos:state=>{returnstate.todos.filter(todo=>todo.done)}}})获取的时候，这样就可以获取到内容，像这样store.getters.doneTodos//->[{id:1,text:'...',done:true}]Getter也可以接受其他getter作为第二个参数：getters:{//...doneTodosCount:(state,getters)=>{returngetters.doneTodos.length}}store.getters.doneTodosCount//->1我们可以很容易地在任何组件中使用它：computed:{doneTodosCount(){returnthis.$store.getters.doneTodosCount}}同样的，我们也可以让Getters结合es6箭头函数返回一个函数，在实际使用页面中传递参数，获取不同的结果，类似于原生js的filterfiltergetters:{//...getTodoById:(state)=>(id)=>{returnstate.todos.find(todo=>todo.id===id)}}store.getters.getTodoById(2)//->{id:2,text:'...',done:false}和上面的mapState类似，Getters也提供了类似的方式import{mapGetters}from'vuex'exportdefault{//...computed:{//使用对象扩展运算符将getter混合到计算对象中...mapGetters(['doneTodosCount','anotherGetter',//...])}}if你想给一个getter属性另一个名字，使用对象形式：...mapGetters({//map`this.doneCount`to`this.$store.getters.doneTodosCount`doneCount:'doneTodosCount'})参考：https://vuex.vuejs.org/zh/也可以扫描二维码，关注我微信公众号，蜗牛全栈
