在 Vue.js 中，随着应用程序的复杂性不断增加，我们需要一种更好的方式来管理全局状态。Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它可以帮助我们更好地组织和管理我们的代码。
什么是 Vuex？
Vuex 是一个状态管理模式和库，它可以帮助我们更好地管理应用程序的状态。它将应用程序的状态存储在一个单一的地方，并且提供了一种可预测的方式来修改状态。Vuex 通过使用 mutations 来修改状态，这些 mutations 是同步的函数，它们接受当前的状态作为参数，并且可以修改状态。
安装 Vuex
要使用 Vuex，我们需要先安装它。可以通过 npm 或者 yarn 来安装它：
npm install vuex --save
或者
yarn add vuex
使用 Vuex
使用 Vuex 的第一步是创建一个 store。我们可以在 Vue.js 应用程序的入口文件中创建 store：
// javascriptcn.com 代码示例
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
actions: {
increment(context) {
context.commit('increment')
}
},
getters: {
getCount(state) {
return state.count
}
}
})
export default store在上面的代码中，我们首先导入了 Vue 和 Vuex，并且使用了 Vue.use(Vuex) 来注册 Vuex。然后我们创建了一个 store，它有三个属性：state、mutations 和 actions。
state 是一个对象，它包含了应用程序的状态。在上面的代码中，我们创建了一个叫做 count 的属性，它的初始值为 0。
mutations 是用来修改状态的函数。在上面的代码中，我们创建了一个叫做 increment 的 mutation，它可以将 count 的值加 1。
actions 是用来触发 mutations 的函数。在上面的代码中，我们创建了一个叫做 increment 的 action，它可以触发 increment mutation。
getters 是用来获取状态的函数。在上面的代码中，我们创建了一个叫做 getCount 的 getter，它可以获取 count 的值。
在组件中使用 Vuex
在组件中使用 Vuex 非常简单。我们可以使用 computed 属性来获取状态，使用 methods 属性来触发 actions。
// javascriptcn.com 代码示例
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="incrementCount">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.getters.getCount
}
},
methods: {
incrementCount() {
this.$store.dispatch('increment')
}
}
}
</script>在上面的代码中，我们首先使用 computed 属性来获取 count 的值，它调用了 getCount getter。然后我们使用 methods 属性来触发 increment action。
总结
在本文中，我们学习了如何使用 Vuex 来管理全局状态。我们首先介绍了 Vuex 是什么，然后学习了如何安装和使用 Vuex。最后，我们展示了如何在组件中使用 Vuex。
使用 Vuex 可以帮助我们更好地组织和管理我们的代码，它可以让我们的应用程序更加可预测和可维护。如果你是一个 Vue.js 开发者，我强烈建议你学习和使用 Vuex。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653c1a9d7d4982a6eb652e06