简单的vuex 的使用案例笔记

1、 npm install vuex

2、 在src 下 新建文件夹 store （为什么是这个单词，vuex 是用来状态管理的，用储存一些组件的状态，取存贮,仓库之意），store 文件下 新建文件 index.js (为什么是index.js？ 在导入的时候，会第一选择这个叫index的文件)

3、 index.js import 导入 vue 和vuex (import 是es6 的语法， es5 是 require),代码如下：

这里的demo 是一个 改变 app 的模式 的一个appellation ，选择是 夜间模式还是白天模式

4、 main.js import 这个index.js 代码如下：

5、使用vuex 的状态

组件1:

dom :

js

注意：

:class="model" 这个class 可以绑定一个方法传参数，可以直接用 js 表达式，可以绑定一个计算属性

组件2:

dom:

js:

注意：

js 中的 currentModel 和 dom 中的 {{ currentModel }} 是一个，和 :class 可以跟表达方法一样 ，可以跟变量,表达方法,表达式 （ 这里灵活的模版方法，回头查看下源码，然后补充这的说明， vue模版为何如此强大！）

点击事件，触发方法 changeModel ，changeModel 触发 mutation 的方法，显示改变 值 ，这个是固定的语法， this.$store.commit('increment');

increment 可以在定义的时候，设置参数，传参数， this.$store.commit('increment','argumnet'),在 mutation 里面 increment (state,arg) { .. = arg; ....};

截图如下：

默认方式：

如上图显示。默认的是，白天的模式，className 是 morning；

点击事件触发模式；

再次点击的时候，可以在改回来，这个窍门，就是 index.js 里面，increment 对 night 的变量 取 对 的一个逻辑方法。跟jq 里面的 toggle，类似

结束语：

简单的vuex 的案例 ，做个笔记。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程之家网站的支持！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!