这里查看最简单的一个 Vuex 状态管理的示例。

从例子中可以看出，要改变一个 state，必须要在 mutations 定义一个方法，这个方法可以接收两个参数，第一个是 state 属性，用来访问想要的状态，第二个是一个 payload（荷载），这个 payload 可以是一个值，也可以是一个对象，是传入用于处理对象的参数。

定义好 mutation 方法之后，我们需要在需要的时候定义 commit 方法来提交定义好的 mutation 方法，并且按它的要求传入相应的 payload，commit 方法是属于我们的状态树全局单例的方法，我们可以通过 store.commit() 来调用，或者在全局注入 store 之后，在任何地方都可以吃通过 this.$store.commit() 来定义提交方法。我们这里将它定义在按钮的点击事件中：

plus () {
  store.commit('plus', {num: 10})
}

在上面的方法定义，我们可以把对应的 mutation 名字也并入到 payload 中，一次性传入：

plus () {
  store.commit({type: 'plus', num: 10})
}

最后，为了页面能够监测到 state 的值，我们可以通过计算属性来访问状态：

computed: {
  count () {
    return store.state.count
  }
}

这样，一次单向数据流的状态管理过程就实现了。

介绍，十分简洁。

以上就是 Vuex 的一些核心概念，以及用它进行状态管理的基本步骤。至于在实际的项目中如何使用 Vuex，只有在项目用到了才会知道~So，跑起来吧。

ITPub博客

Vuex——Vue的状态管理利器

最新文章