当前位置: 首页 > 科技观察

五分钟搞懂Vuex的实用知识

时间:2023-03-15 17:15:13 科技观察

这段时间一直在用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中的对象简写是这样的