什么是 Vuex？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
在 Vue.js 中，组件之间的状态通常是通过 props 和事件进行通信的。但是，当组件层级较深时，这种通信方式就会变得很麻烦。如果将所有的状态都放在根组件中，又会变得难以维护。
Vuex 的出现解决了这个问题。它将应用程序的状态集中到一个全局状态树中，然后通过定义规则的方式使得状态的变化可追踪和可维护。
Vuex 的核心概念
State
State 是 Vuex 存储数据的地方。它是唯一的，也就是说，在整个应用程序中，只有一个 state。这个状态树是响应式的，也就是当 state 中的数据发生变化时，相应的组件视图也会发生变化。
下面是一个示例 state：
const state = {
count: 0
}Getter
Getter 就像 state 的计算属性。Vuex 允许我们定义 getter 函数来获取 state 中的数据。Getter 函数可以接收 state 作为参数，并返回一个计算后的值。
下面是一个示例 Getter：
const getters = {
getCount: state => {
return state.count
}
}Mutation
Mutation 用于修改 state 中的数据。它是 Vuex 中唯一一个能修改 state 的方式。Mutation 接收 state 作为第一个参数，并接收一个载荷（payload）作为第二个参数。载荷通常是一个对象，包含要修改的数据。
下面是一个示例 Mutation：
const mutations = {
increment (state) {
state.count++
},
add (state, payload) {
state.count += payload.amount
}
}Action
Action 用于提交 Mutation。它可以包含异步操作，例如从服务器获取数据。Action 接收一个 context 对象作为参数，这个对象包含 state、getter、commit、dispatch 方法。Action 通过 commit 方法提交 Mutation，修改 state 中的数据。
下面是一个示例 Action：
-- -------------------- ---- -------
----- ------- - -
-------------- -- ------ -- -
------------- -- -
-------------------
-- -----
--
-------- -- ------ -- -------- -
------------- -- -
------------- --------
-- -----
-
-Module
Module 允许我们将 Vuex 的状态树拆分为更小的模块。每个模块都有自己的 state、getter、mutation 和 action。这样可以使得应用程序的状态更加清晰可维护。
下面是一个示例 Module：
-- -------------------- ---- -------
----- ------- - -
------ - --- --
-------- - --- --
---------- - --- --
-------- - --- -
-
----- ------- - -
------ - --- --
-------- - --- --
---------- - --- --
-------- - --- -
-
----- ----- - --- ------------
-------- -
-- --------
-- -------
-
--Vuex 的使用
通过将 Vuex 集成到 Vue.js 中，我们可以轻松地访问全局 state、getter、mutation 和 action。
首先，我们需要用 Vue.use() 方法安装 Vuex：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
然后通过创建一个 Store 对象来定义全局 state、getter、mutation 和 action：
const store = new Vuex.Store({
state: { ... },
getters: { ... },
mutations: { ... },
actions: { ... }
})在组件中使用 State
通过 this.$store.state 访问 state 中的数据。
export default {
computed: {
count () {
return this.$store.state.count
}
}
}在组件中使用 Getter
通过 this.$store.getters 访问 getter 中的数据。
export default {
computed: {
getCount () {
return this.$store.getters.getCount
}
}
}在组件中使用 Mutation
通过 this.$store.commit() 提交一个 mutation。
-- -------------------- ---- -------
------ ------- -
-------- -
--------- -- -
-------------------------------
--
--- -------- -
------------------------- - ------ --
-
-
-在组件中使用 Action
通过this.$store.dispatch() 提交一个 action。
-- -------------------- ---- -------
------ ------- -
-------- -
-------------- -- -
--------------------------------------
--
-------- -------- -
-------------------------------- - ------ --
-
-
-总结
在 Vue.js 应用程序开发中，状态管理是非常重要的一环。Vuex 的出现解决了组件通信和状态管理的难题，提高了应用程序的可维护性。
通过了解 Vuex 的核心概念，并结合示例代码的运用，我们可以更好地理解 Vuex 的使用方法。希望这篇文章能对 Vue.js 前端开发工作者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472c572968c7c53b005abed