vuex 状态管理模式

VUE 之状态管理模式vuex小结

vuex 状态管理模式（概念）

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

一个简单的 store 模式如下：（包含state状态及 状态变化后执行的方法 mutations,后续会提到）

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 = ''
  }
}

需要注意，所有 store 中 state 的改变，都放置在 store 自身的 action 中去管理。这种集中式状态管理能够被更容易地理解哪种类型的 mutation 将会发生，以及它们是如何被触发。当错误出现时，我们现在也会有一个 log 记录 bug 之前发生了什么。

此外，每个实例/组件仍然可以拥有和管理自己的私有状态：

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

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

1.什么是mutation

​ 通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。切记：Vuex中store数据改变的唯一方法就是mutation！

2.怎么用mutations？

mutation结构

​ 每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler)，先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。

实战小例子

//zyw.js
const store = new Vuex.Store({
state: {

​ count:0

},

​ mutations: { addCount(state) {

​ // 变更状态

​ state.count++

alert(state.count); }
}
})
//页面上触发

利用 store.commit方法更新状态值 ，点击之后每次自增。