简介
Vuex 是 Vue.js 的官方状态管理工具，用于管理应用程序中的各种状态。在 Vue.js 中，可以通过访问 Vuex 状态来获取和修改应用程序的状态。
但是，访问 Vuex 状态并不是一件简单的事情。如果不按照正确的姿势进行操作，可能会导致应用程序状态不一致，甚至出现严重的错误。
本文将介绍在 Vue.js 2.0 中访问 Vuex 状态的正确姿势，以及如何在实践中应用这些技术。
Vuex 状态的访问
在 Vue.js 中，访问 Vuex 状态有两种方法：使用 Vuex 对象，或使用 mapState 辅助函数。
使用 Vuex 对象
Vuex 对象是 Vuex 的全局对象。通过访问 Vuex 对象，可以获取和修改 Vuex 状态。以下是访问 Vuex 状态的基本操作：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
-------------
-
-
--
-- ----
------------------------------
-- ----
-------------------------
------------------------------在上面的代码中，Vuex 对象被引入，并注册到了 Vue 实例中。创建了一个 Vuex store，并定义了 state 和 mutations。使用 store.state.count 访问，在控制台输出当前状态的值。使用 store.commit 修改状态，再次输出状态的值。
使用 mapState 辅助函数
mapState 辅助函数可以将组件的计算属性映射到 Vuex 状态。以下是使用 mapState 辅助函数访问 Vuex 状态的基本操作：
-- -------------------- ---- -------
------ - -------- - ---- ------
------ ------- -
--------- -
-------------
-------
--
--
-------- -
----------- -
-------------------------------
-
-
-在上面的代码中，使用 mapState 辅助函数将计算属性 count 映射到 Vuex 状态中的 count。在 methods 中定义了一个 increment 方法，调用 store.commit 修改状态。
实践指导
访问 Vuex 状态时，需要注意以下几点：
不要直接更改 Vuex 的状态
Vuex 的状态是应用程序的核心状态。应用程序的各个组件都可能访问和修改 Vuex 的状态。为了确保应用程序状态的一致性，需要遵循以下规则：
- 所有状态的更改必须通过提交mutation。
- 在 mutation 中更改状态是唯一的方法。
如果直接更改 Vuex 的状态，可能会导致应用程序状态的不一致。
在组件中访问 Vuex 状态
在 Vue.js 中，组件是应用程序的主要构建块。通过在组件中访问 Vuex 状态，可以更好地管理应用程序的状态和行为。
当使用 Vuex 对象访问状态时，需要将 Vuex 注入到 Vue 实例中。否则无法获取和修改 Vuex 的状态。
当使用 mapState 辅助函数访问状态时，需要引入 mapState 函数，并将计算属性映射到 Vuex 状态中。
建议使用 mapState 辅助函数访问 Vuex 状态。这可以使代码更加简洁和易读。如果使用 Vuex 对象来访问状态，可能会导致代码复杂性和可读性的下降。
示例代码
以下是一个简单的示例，以演示在组件中访问 Vuex 状态的方法。在应用程序中，有两个组件：一个显示当前计数的组件和一个用于递增计数的组件。
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ --- ---- -----------
-------------
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
-------------
-
-
--
--- -----
--- -------
------ ------
------- - -- ------
---- -------------------- ---- -------
---- ------- ---
----------
-----
--------- -- ----- ------
------- -------------------------------------
------
-----------
--------
------ - -------- - ---- ------
------ ------- -
--------- -
-------------
-------
--
--
-------- -
----------- -
-------------------------------
-
-
-
---------在上面的代码中，我们创建了一个简单的应用程序，在该应用程序中有两个组件： App 组件和 Counter 组件。
App 组件通过计算属性 count 访问 Vuex 状态，并在模板中显示计数器的当前值。同时，App 组件也有一个按钮，可以递增计数器的值。
Counter 组件中定义了一个按钮，用于递增计数器的值。该组件使用 store.commit 来调用 mutation，从而更改计数器的值。
总结
访问 Vuex 状态是 Vue.js 应用程序开发的重要组成部分。通过遵循正确的姿势，可以更好地管理应用程序的状态和行为，并使代码更加简洁，易读。需要注意的是，不要直接更改 Vuex 的状态，以免导致应用程序状态的不一致。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648af67548841e98949515e7