一,前言

前面介绍了vue-router和axios,这篇开始介绍全家桶最后一位成员Vuex--状态管理
之前说Vue.JS借鉴了angularJs和ReactJs的优点,ReactJs中有Redux做状态管理
Vue的状态管理Vuex正是借鉴了Redux的思想,下面开始介绍Vuex

二,Vuex介绍

Vuex是Vue应用程序的状态管理插件,采用集中式存储,管理应用中所有组件的状态

Vue官方调试工具devtools extension也可以对Vuex进行调试,具备状态快照导入导出等调试功能

官网:https://vuex.vuejs.org/zh/

三,为什么要使用状态管理

来自官网例子:

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

以上是一个未使用状态管理模式(即状态自管理)简单的计数器程序,
1,页面显示计数器当前计数,
2,数据来自data中的count,
3,方法increment触发计数+1

这就形成了一个单向数据流

state，驱动应用的数据源(同data)
view，以声明方式将 state 映射到视图(同template)
actions，响应在view上的用户输入导致的状态变化(同methods)

这种单向数据流目前看非常简洁,但是当多个组件需要共享状态时,就会使单向数据流遭到破坏

问题一:多个视图依赖于同一状态

传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力

问题二:来自不同视图的行为需要变更同一状态

采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝

解决问题:

以上两种问题的解决办法通常会导致代码无法维护

更好的办法,将组件的共享状态抽取出来，由一个全局单例模式进行管理
这种模式下，组件树构成一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或触发行为
通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，代码将变得更结构化且易维护

这就是Vuex的思想,它借鉴了Flux,Redux和The Elm Architecture
不同的是,Vuex是专门为Vue.js设计的状态管理库,能利用Vue.js的细粒度数据响应机制进行高效的状态更新

使用Vuex后,上边的单项数据流将变为:

对于Vuex概念和流程的理解,将在下一篇进行展开介绍

四,Vuex的使用场景

通过上边的分析可以看到使用Vuex状态管理共享状态对应用带来的巨大好处
但尽管如此,并不是所有Vue应用都必须使用Vuex
使用Vuex管理共享状态,也附带了更多的概念和框架
对于简单的单页应用,使用Vuex可能并不是一件好事
如果需要构建一个中大型单页应用,会考虑如何更好地在组件外部管理状态，
这时Vuex就可以发挥出它的威力了

所以,是否需要使用Vuex进行状态管理还需要根据实际情况进行权衡

三结尾

下一篇将对Vuex的概念和流程进行展开介绍