vue学习十六(vuex)

概念

Vuex是用来管理组件之间通信的一个插件

state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。

getters：有时候，我们需要对state的数据进行筛选，过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了，getters就是干这个的，你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数。那么，组件是如何获取经过getters过滤的数据呢？ 过滤的数据会存放到$store.getters对象中

mutations：前面讲到的都是如何获取state的数据，那如何把数据存储到state中呢？在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。　　mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！

有几个步骤：

1 在mutations选项里，注册函数 函数里面装逻辑代码。
2在组件里，this.$store.commit('change',payload) 注意：提交的函数名要一一对应
3触发函数，state就会相应更改
4在组件的计算属性里 this.$store.state 获取你想要得到的数据

actions：既然mutations只能处理同步函数，我大js全靠‘异步回调’吃饭，怎么能没有异步，于是actions出现了…

actions和mutations的区别
1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。
2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下

context：context是与 store 实例具有相同方法和属性的对象。可以通过context.state和context.getters来获取 state 和 getters。

dispatch：翻译为‘派发、派遣’的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。

action的大体流程：
1、在actions选项里添加函数（异步）并提交到对应的函数（在mutation选项里）中 context.commit(‘changeAsync’,value);

2.　在组件里： changeNumAnsyc:function(){this.$store.dispatch(‘add’, 5);} 将dispatch“指向”actions选项里的函数
3.　在mutations选项里，要有对应的函数 changeAsync:function(state,a){console.log(state.num +=a);}

实例

我们通过一个例子看理解下上面的概念

浏览器输入file:///Users/zhiliao/zhiliao/vue/index_test.html

点击p标签,同步使次数增加

姓名：jjk 年龄：18 次数：11

点击change按钮，一秒后，异步使次数增加

姓名：jjk 年龄：18 次数：16