如何使用vuex(vue的使用教程)

导语：教你优雅的使用vuex

如果对es6不熟悉的同学先去看阮一峰老师的es6教程哦!否则你会看的很懵逼 看过的就当我没说

如果没有安装vuex 请安装 npm install vuex --save (基于vue-cli)

src目录下新建store文件夹

然后index.js里面代码

把刚才创建的文件都import进去 actions先不用写 因为我这是最终版的所以我就先注释了

getters.js里面代码内容如下

mutations-types.js代码如下

mutations.js 代码如下

state.js代码如下

我们先不用action 先用mutation去提交我们的数据

在index.vue这个文件里面先引用vue给我们提供的辅助函数

这里我们引用两个辅助函数mapGetters和mapMutations,

在计算属性里面写

这里userInfo就是我们前面getters.js里面那个export出去的userInfo,然后就可以在template这一块写了 如下图所示

这时候是没有数据的 因为还没有提交嘛

在methods里面写,代码如下

我们把SET_USER_INFO这个函数映射到我们这个setUserInfo,然后就可以在clickCard这个方法里面像往常调用方法一样去调用我们这个setUserInfo这个方法,再把事先在data里面定义的user对象传过去就可以了

因为这个demo是点击才会去触发这个mutation 所以我们要在在dom里面绑定一下这个clickCard方法

从图上可以看出来我们没有点击时是空的 打开开发者工具vuex里面我么可以看到都是空的

当我们点击之后就数据出来了 再次查看开发者工具里的vuex 可以看见这次state里面是有值的这说明我们的mutation也生效了

然后我们可以用action来提交看一下,我们在store文件夹下面新建一个actions.js这时候目录结构就是下图这样

actions.js里的代码如下

然后打开我们的index.vue 我们刚才只引用了mapGetters,mapMutations,这里我们再引用一个mapActions

把...mapMutations改成如下

这里的actionSetUserInfo对应我们再actions.js里面export出去的那个函数方法

然后我们再clickCard这里面把this.setUserInfo(this.user)改成this.actionSetUserInfo(this.user)

然后再去看看页面 so easy 妈妈再也不担心我学不会vuex了

本文内容由小熊整理编辑！