Vuex (opens new window)

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens new window))”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

什么是Vuex

Vuex是状态管理模式，它采用集中式存储管理应用的所有组件的状态， 并以相应的规则保证状态以一种可预测的方式发生变化。

什么情况下使用 Vuex

• 多个组件共享状态
• 多个视图依赖于同一状态。
• 来自不同组件的行为需要变更同一状态。

数据更新逻辑

• store.dispath Action

• Action 触发 mutation

• mutation 改变 state

• state 更新触发视图更新

单一状态

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}
// 组件A
var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})
// 组件B

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

参考

1. vuex学习 (opens new window)