vuex入门

这篇文章是我个人对vuex文档的学习笔记,掺杂了个人理解与文档内容,且不一定准确.

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 .
状态管理模式:
vuex使用全局单例模式来进行状态管理.(即设计模式中的单例模式)
单例模式:
一个类只能有一个实例,并提供一个访问他的全局访问点的设计模式.
核心概念:
State:
单一状态树:用一个对象保存所有应用层级的状态.一个应用将只会有一个store实例.
从vue组件中获取vuex的状态:

const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件(下面等价于store:store,后一个store为vuex的实例)
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到
mapState 辅助函数:

//…
computed:mapState({
    a:function(){
        //code
}})

用mapState覆盖computed,mapState接收一个对象,对象是由名值对构成,其值是函数.

Getter:
Vuex 允许我们在 store 中定义“getter”, 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算.
获取数据就依赖于getter函数,如store.getter.fn.
其中store是vuex的实例,fn是要获取的函数.

Mutation:
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation. 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

在上面的代码中,increment就是类型(type),他的函数就是回调函数(handler).
你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：
store.commit('increment')

提交载荷（Payload）:
对store.commit参数传入的额外参数被称为载荷.载荷应该是一个对象,这样语义更加清晰并且可以传入多个数据.如:

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

对象风格的提交方式:
提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
  type: 'increment',
  amount: 10
})

其中type属性的值就是要提交的回调函数类型.

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

在组件中提交mutation:
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation. $store是根节点被诸如的vuex实例.
注意事项:
mutation必须同步执行.

Action:
Action 类似于 mutation，不同在于：
• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
increment (context) {
//context等价于vuex的实例
      context.commit('increment')
    }
  }
})

如上面代码所示,actoin对象拥有的方法内部有mutation的提交方法commit.相比用mutation直接调用,action明显可以在调用前增加一些处理代码.
与mutation的相同的地方:
支持载荷方式和对象方式进行分发.

各个概念的总结:
state是作为数据源存在.
getter负责获取这些数据.
mutation负责状态的更新.
action可以在更新状态前进行一些额外的操作.
module则可以将大块的状态分割成小块的.

关于vuex文档的一些注解:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

这种写法相当于:

computed: {
doneTodosCount:fn(){
return this.$store.getters.doneTodosCount
  }
}