Vue-Vuex（六）

Vuex中管理的对象属性都是响应式的

我们可以在各组件中直接使用this.$router，this.$route，this.$store是因为在Vue.use(插件)的时候会执行插件.install()。他俩的install()会给Vue的prototype加上$router和$route和$store，所以以后在各组件中才能直接获取到。而new Vue时传入的options中的router和store就是给到时候往原型上加属性时准备的值

const store = new Vuex.store({ state: {//涉及到一个'单一状态树'的概念。大白话就是整个程序最好只有一个store对象，只有一个state对象。都写到一起方便管理 counter: 0, students: [//通过this.$store.state.students调用 {'name':'jilegeji','age':22}, {'name':'codewhy','age':18} ] }, mutations: {//官方推荐使用mutation来修改state。可以不经过actions，直接调用mutations。但是注意不要在这里进行异步操作。 increment(state) {//由事件类型type和回调函数handle组成。handle函数的第一个参数就是state对象，可以直接使用。通过this.$store.commit('increment')调用 state.counter++ }, addStudent(state,stu){//第二个参数被称为是mutation的载荷payload，可以是单个值，也可以是一个对象。 state.students.push(stu) } }, actions: {//最重要的就是第一个参数context。actions中做一些异步处理操作，可以返回Promise对象 }, getters: {//相当于组件中的computed，也相当于是属性的感觉。对state中的属性进行再加工返回。getters默认是不能传递参数的，可以参考下面的moreAgeStu方式实现。 more20stu(state){//通过this.$store.getters.more20stu调用 return state.students.filter(stu => stu.age>20) }, more20stuLength(state,getters){//同样可以直接传入getters对象。 return getters.more20stu.length }, moreAgeStu(state){//这里不能直接将age作为参数传入。//通过this.$store.getters.moreAgeStu(age)调用 return function (age){ return state.students.filter(stu => stu.age>age) } } }, modules: { a: moduleA, b: moduleB } })

mutation的提交风格

1.普通提交：this.$store.commit(‘increment’,5)。这种方式mutation中第二个参数就是5 2.特殊提交：this.$store.commit({‘type’:‘increment’,‘count’:5})。这种方式mutation中第二个参数就是传递的对象。

数据的响应式

有些操作可能不会触发响应式。各版本之间好像也有区别，遇到问题在具体百度吧。 一般属性都是初始化定义好的才能响应式。直接添加属性和删除属性或者一些特殊情况(比如数组元素替换)可能不会触发响应式 Vue.set()//直接修改值不能触发响应式，可以通过该方法修改 Vue.delete()//直接删除不能触发响应式，可以通过该方法修改 js中删除对象的某属性delete state.info.age

mutations的类型常量

随着mutations中的方法越来越多，官方推荐将所有的事件类型type(就是方法名)抽取出来，当作类型常量，具体百度。参考链接

官方推荐使用mutation修改state的原因是可是使用devtools。但同时也要注意mutation中不能有异步代码，否则devtools也是无法正常记录的。

modules

当使用了moduels时要注意用法上的变化 1.state this.$store.state.a.state属性 2.mutation 用法上没有变化，依然是this.$store.commit()。注意各module内名字不要重复。 3.getters 用法上没有变化，依然是this.$store.getters.xxx。注意各module内名字不要重复。此外，在module中的getters还可以有第三个参数，如下： more20stuLength(state,getters,rootState){//rootState就是父state //some code } 4.actions 用法上没有变化，依然是this.$store.dispatch()。注意context的含义。可以打印context看下就明白context里都有什么了。这里还涉及到es6的解构语法。{ commit, state, dispatch }就是contex中的一些属性