Vue状态管理之Vuex

Vuex是专为Vue.js设计的状态管理模式。采用集中存储组件状态它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

一、首先让咱们从一个vue的计数应用开始

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

　　在这个组件的数据对象中保存着一个初始为0的状态值count，咱们能够经过调用increment方法修改count值，以实现递增计数功能。

这个状态自管理应用包含如下几个部分：

state: 驱动应用的数据源。

view：以声明的方式将state映射到视图。

actions: 相应用户在视图上输入致使的状态变化。 

如下是这个单向数据流的简单示意图。

 

可是当遇到多个组件状态共享时，单向数据流的简洁性很容易被破坏：

①多个组件依赖同一状态

②来自不一样视图的行为须要变动同一状态

对于问题①传参的方法对于多层嵌套的组件将会很是繁琐，且对于兄弟组件间的状态传递无能为力。

对于问题②咱们常常会采用父子组件直接引用或者经过事件来变动和同步状态的多份拷贝。以上的这些模式很是脆弱，一般会致使没法维护的代码。

所以将共享状态抽取出来做为全局单例模式管理，这就是vuex的基本思想。