Vuex 存储在 JavaScript 文件中

Vuex 是一个状态管理模式和库，用于在 Vue.js 应用程序中管理应用程序级别的状态。

Vuex 中的状态存储在 JavaScript 文件中。这些 JavaScript 文件包含状态、操作、突变和 getter 函数。

Vuex 状态

在 Vuex 中，状态被定义为存储在 State 对象中的数据。这些数据可以是任何 JavaScript 对象，包括字符串、数组、布尔值和数字。

以下是一个包含三个状态属性的 State 对象的示例：

state: {
  count: 0,
  isLoading: false,
  currentUser: null
}

Vuex 操作

操作是用于更改状态的函数。在 Vuex 中，操作定义为包含两个参数的函数：状态和负载。负载是操作的参数，用于从组件中传递数据到操作。

以下是一个简单的操作的示例：

mutations: {
  increment: function (state, payload) {
    state.count += payload.amount
  }
}

Vuex 突变

突变是更改状态的函数，但它们不像操作那样直接更改状态。相反，它们通过用新值替换旧值来更改状态属性。

以下是一个简单的突变的示例：

mutations: {
  setIsLoading: function (state, isLoading) {
    state.isLoading = isLoading
  }
}

Vuex Getter 函数

Getter 函数用于从 Vuex 状态中计算和派生值。Getter 函数可以接受状态、突变和其他 Getter，以便它们可以访问和操作 Vuex 状态。

以下是一个简单的 Getter 函数的示例：

getters: {
  currentUserInitials: function (state) {
    return state.currentUser ? state.currentUser.name.split(' ').map(function (n) {
      return n[0]
    }).join('') : ''
  }
}

总结

在 Vuex 中，状态存储在 JavaScript 文件中。这些 JavaScript 文件包含状态、操作、突变和 getter 函数。在开发应用程序时，使用 Vuex 可以更好地组织和管理应用程序状态。