Vuex 入门

什么是Vuex ？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

什么情况下使用Vuex

一般情况下，我们需要根据项目的实际大小来决定是否需要引入Vuex，如果相对需要存储的内容不是特别多的时候，那么我们也可以通过本地存储进行完成一些数据的存储以及操作。因为对于太简单的项目来说，使用 Vuex 可能是繁琐冗余的。

示例：

我们来看一下官网上的一段代码，内容如下所示：

new Vue({
  // state数据源
  data () {
    return {
      count: 0
    }
  },
  // view视图
  template: `
    <div>{{ count }}</div>
  `,
  // actions事件
  methods: {
    increment () {
      this.count++
    }
  }
})

这是一个很简单的增长型计数功能页面，通过事件 increment，实现 count的增长，然后渲染到界面上去。

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

• state：驱动应用的数据源。

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

• actions：响应在 view上的用户输入导致的状态变化，然后去影响state。

下图是一种”单向数据流“的理念：

这个理念的缺点是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏，如：

• 多个视图依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

• 来自不同视图的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

Vuex的五个核心概念

Vuex有五个核心概念，分别是state、 getters、 mutations、 actions、 modules。

• state：Vuex的基本数据，用来存储变量。

• getters：从基本数据state派生的数据，相当于state的计算属性。

• mutation：提交更新数据的方法，必须是同步的，如果需要异步使用action。每个 mutation 都有一个字符串的事件类型和一个回调函数handler。

• action：和mutation的功能大致相同，不同之处在于action 提交的是mutation，而不是直接变更状态。action 可以包含任意异步操作。

• modules：模块化Vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理。

链接：https://www.9xkd.com/