Vue状态管理之Vuex

Posted 2021-02-15 chunshan-blog

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

1、首先让我们从一个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的基本思想。