Vuex 在行动中使用状态 - Javascript

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

引入 Vuex

在 Vue.js 项目中，我们可以使用 npm 或者 yarn 安装 Vuex：

npm install vuex --save

yarn add vuex

然后，我们在项目中引入 Vuex：

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

基础概念

State

Vuex 的核心概念之一是 state (状态)，即存储在 Vuex 中的状态数据。可以将其视为组件数据的集中存储，其中的所有组件都可以访问它。

Vuex 的 state 数据需要存放在一个单一的对象中。我们可以在 Vuex 中创建一个对象，将其作为 state 的代理。下面是一个包含两个 state 的示例：

const store = new Vuex.Store({
  state: {
    count: 0,
    message: 'Hello!'
  }
})

Getter

Vuex 的 getter 可以理解为 store 的计算属性，从 store 中的 state 中派生出一些状态，这些状态会随着 store 中的 state 发生变化而变化。

在 Vuex 中，getter 接收 state 作为其第一个参数，以此获取 state 中的值。

下面是一个 getter 的示例：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => state.count
  }
})

Mutation

Vuex 的 mutation 类似于事件，每个 mutation 都有一个字符串类型的事件类型 (type) 和 一个回调函数 (handler)。通过调用 mutation 的方法，我们可以在 store 中修改 state 中的数值。

mutation 必须同步执行，因此它的函数签名只能包含两个参数：state 和 payload，其中 payload 是 mutation 要改变的值。

在 Vuex 中，mutation 必须通过 store.commit 方法进行调用。

下面是一个 mutation 的示例：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload.amount
    }
  }
})

store.commit('increment', {amount: 10})

Action

Vuex 的 action 类似于 mutation，它们都可以在 store 中修改 state 中的数值。但是，action 和 mutation 之间的主要区别在于：

• Action 提交的是 mutation，而不是直接改变状态。
• Action 可以包含异步操作。

与 mutation 类似，action 也具有字符串类型的事件类型和回调函数。回调函数中的 context 对象与 store 对象类似，但它不是 store 本身。

下面是一个 action 的示例：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload.amount
    }
  },
  actions: {
    increment({commit}, payload) {
      setTimeout(() => {
        commit('increment', payload)
      }, 1000)
    }
  }
})

store.dispatch('increment', {amount: 10})

Mutation 和 Action 的区别

作为开发人员，我们应该尽可能地将 mutation 保持纯粹，因为不纯的 mutation 可能会导致调试困难、使代码变得难以理解等问题。

也就是说，如果一个方法修改了 state 的值，我们应该将其定义为 mutation；如果一个方法只是从后台获取了数据并将其放入 state 中，则应该将其定义为 action。

结论

Vuex 在 Vue.js 应用程序中有着重要的作用。它可以让我们集中式地管理应用程序的所有状态，并以一种可预测的方式发生变化。我们可以使用 Vuex 中的 state、getter、mutation、action，以及它们之间的关系，更好地管理应用程序的状态，提高应用程序的可维护性和可测试性。