简单的理解Vuex,手把手教会

355 阅读3分钟

上周有朋友问我vuex的问题,刚好上次做了一个独立项目也需要用到,发现自己不会,于是去看官网API。看的一头雾水,又是百度各种资料。然后自己敲代码,摸索了一下,最后知道大概意思了,ps:(本文只针对Vuex新手),如果你已经理解很透了,或是大神,就不适合你了。

先来看看官方的说法:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

我的理解:就是把Vuex比作是前端的数据库,用来存全局的,公用的数据,然后提供获取数据、修改数据对应的方法。

核心概念:(Store,state,Mutations,Mutation-type.js,Actions)我只对我目前能力范围内用到的,Demo过的做讲解一下,新手也好入手。

Store,就比作数据库,里面放数据(state),我要修改数据就用(Mutations)commit,修改的逻辑用(Action)这里写方法,也可以直接在mutations里面直接修改,但是不能修改异步的。

下面以我的项目为例:

本人项目框架目录结构图如下:


文件夹对应的名称,

shendun:项目名称,store:此文件夹就是用来放状态管理池,我把它当做前端数据库。

开始实例:

一:项目中找到main.js,并在根部注入store


store文件夹里面的index.js引入了Vuex


到此Vuex就引入和注册完成了。然后我开始在在state里面放一个公用的数据

默认我在state.js里面写一个 testName:"xiaohong"的数据。


接下来我来修改这个数据,在Mutations.js里面


说明:modifyName,是自己定义的方法名称(此Demo是用来修改我们默认的定义好的testName),data是我们后修改需要传进来的数据,state.testName就是我获取state.js里面定义好的初始化的数据。state.testName  输出是"xiaohong"。

万事具备了,接下来我到我需要用到的页面去调用(indexIntroduceEntrance.vue),


在methods里面定义一个方法“modify”,mounted() 里面调用modify方法,并打印出我们的数据是否修改成功,我传入的参数是“liuzhiqiang”。

看控制台打印结果如图:


textName由原来的"xiaohong",成功的修改为了"liuzhiqiang"。触发方法我们用commit,如上图this.$store.commit('modifyName',data),data是我们要出入的参数。

第二种方法,就是我们用mutation-types.js,这个js其实存的就是函数方法名称的常量。

继续上一个实例,


mutation-types.js里面导出一个常量 modifyName

mutations.js引入我们定义的常量


方法名称用[modifyName]这样既可,其他的不变

indexIntroduceEntrance.vue会有所变化如图:


先要从Vuex引入mapMutations(辅助函数),methods 里面解构...mapMutations(),方法调用直接是this.modify()  和原来的commit('modify')不同

控制台输出结果:


文章到此结束了,有问题或者不足错误的地方联系我或者给我留言

author:578557428@qq.com