五分钟搞懂Vuex的实用知识

这段时间一直在用vue写项目，项目中也会用到vuex，但总有一种朦胧的感觉。所以我决定弄清楚。看了一个下午的官方文档资料，发现vuex原来这么简单！作为圈子里的人，我决定输出文档。如果你仔细阅读这篇文章，你一定已经精通vuex。我把我的代码上传到了github，有需要的可以拉下来：github先说说vuex是什么？vuex是专门为vue.js应用开发的状态管理模式。我们可以将这种状态理解为数据中的一个属性，需要与其他组件共享。也就是说，就是我们需要共享的数据，使用vuex进行统一集中管理。在vuex中，有五个默认的基础对象：state：存储状态（变量）getters：数据获取前的重新编译，可以理解为state的计算属性。我们在组件中使用$sotre.getters.fun()突变：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这类似于我们组件中的自定义事件。动作：异步操作。components中使用的是$store.dispath('')modules：store的子模块，用于开发大型项目，便于状态管理。这里就不解释了，同上。现在开始正式开始，一步步使用vuex1，首先创建一个vue-cli项目执行以下命令，创建一个app项目（也可以使用其他非webpack模板，此处非app名称）vueinitwebpackapp2，创建完成后完成后，我们进入文件文件夹，运行项目cdapp/npmrundev接下来，我们在src目录下创建一个vuex文件夹，在vuex文件夹下创建一个store.js文件。我们需要先下载vuex，并导入确保在我们的项目下，在命令行输入如下命令，安装vuexnpminstallvuex--save4，安装成功后我们就可以在store.js中播放我们的vuex了！在store.js文件中，引入vuex，使用vuex。这里注意我的变量名是大写的Vue和VueximportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststate={count:0}exportdefaultnewVuex.Store({state})接下来引入storeimportVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importstorefrom'./vuex/store'//在main.js中引入storeVue.config.productionTip=false/*eslint-disableno-new*/newVue({el:'#app',router,store,components:{App},template:''})然后我们就可以使用我们定义在任意组件上的count属性了。这里我们在helloWorld中使用它去除helloworld.vue中不用的标签打开我们刚才运行项目的浏览器，可以看到已经使用成功了！而在vue开发工具中，我们可以看到我们定义的变量count，已经有一小部分成功了！Vuex很简单吧？回想一下，我们只需要使用vuex下载安装，在我们定义的store.js中定义state对象，暴露出来即可。在main.js中使用我们的store.js（这是为了防止各个组件中的引用，因为在main.js中，有我们新建的Vue实例！）现在我们已经使用了vuex中的state，接下来我们如何操作这个值呢？这是正确的！使用mutations和actions，我们继续操作store.js文件。我们在sotre.js中定义了mutations对象。对象中有两个方法。mutations中的参数，第一个默认是state，下一个是自定义参数。我们在mutations中定义了两个方法，increase和decrease，并设置了一个参数n，默认值为0，然后在Vuex.Store中使用/***mutations是我们用来操作state对象属性的方法*/constmutations={mutationsAddCount(state,n=0){return(state.count+=n)},mutationsReduceCount(state,n=0){return(state.count-=n)}}exportdefaultnewVuex.Store({state,mutations})然后我们在helloWorld.vue中使用这个方法还记得我们如何在组件中使用突变吗？它非常类似于自定义事件方法：{handleAddClick(n){this.$store.commit('mutationsAddCount',n);},handleReduceClick(n){this.$store.commit('mutationsReduceCount',n);}}来浏览器看看效果如何！我们可以看到，每当有事件触发时，在vue开发工具中就可以看到我们的triggeredmutations方法，参数完美！接下来是actions，actions是创建一个actions对象的异步操作，而这里我在两个方法中使用了两个不同的参数，一个是context，它是一个和store对象具有相同对象属性的参数。在第二个函数中，我直接使用了这个对象的commit方法。Constactions={actionsAddCount(context,n=0){console.log(context)returncontext.commit('mutationsAddCount',n)},actionsReduceCount({commit},n=0){returncommit('mutationsReduceCount',n)}}exportdefaultnewVuex.Store({state,mutations,actions})在helloWorld.vue方法中，添加两个方法，使用dispath触发

handleActionsAdd(n){this.$store.dispatch('actionsAddCount',n)},handleActionsReduce(n){this.$store.dispatch('actionsReduceCount',n)}进入浏览器看效果！最后是吸气剂。我们一般使用getters来获取我们的state，因为它是state的一个计算属性getters})

{{count}}

constgetters={getterCount(state){return(state.count+=10)}}getters非常简单。至此，如果你都明白了，你对vuex就没有压力了。但是vuex官方给了我们一个更简单的使用vuex的方法，就是{mapState,mapMutations,mapActions,mapGetters}只要我们了解了上面的基础知识，这些都不是问题，只是让我们自己写。就这么简单，这里我们使用es6的展开运算符。不熟悉的话，应该看看阮一峰的这本书《Es6标准入门》，我看过，受益匪浅！同样，getters和state也可以使用mapState。如果懒得用mapGetters，我们可以用数组代替对象，或者es6中的对象简写是这样的