vuex的理解

概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;集中存储和管理应用的所有组件状态。

• 状态
• 集中存储
• 管理
• 所有组件状态

• 应用场景

  1.状态

  什么是状态，我们可以通俗的理解为数据，这里的状态管理可以简单理解为管理数据。

  2.集中存储

  Vue只关心视图，那么我们需要一个仓库（Store）来存储数据，而且是所有的数据集中存储

  3.管理

  除了存储，还可以管理数据，也就是计算、处理数据。

  4.所有组件状态

  所用的组件共用一个仓库（Store），也就是一个项目只有一个数据源（区分模块modules）。

  5.应用场景

  从一个简单的 Vue 计数应用开始：

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

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；

• actions，响应在 view 上的用户输入导致的状态变化。
  
  但是当我们的应用遇到多个组件共享状态时，

• 多个视图依赖于同一状态。

• 来自不同视图的行为需要变更同一状态。
  针对一： 兄弟组件间的状态传递没有办法解决。对于问题二， 经常采用父子组件直接引用或者通过事件变更和同步装填的多份拷贝，但是很混乱难以维护。
  因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！