在 Vue.js 2.0 中，使用 Vuex 管理应用程序状态非常方便。Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库，它提供了集中式存储管理应用程序所有组件的状态，并使得这些组件的状态变得可预测。
在 Vuex 中，我们可以使用 mapState 辅助函数来获取状态的值。本文将详细介绍 mapState 的用法。
什么是 mapState？
mapState 是一个辅助函数，它可以将 store 中的状态映射到局部计算属性中。它返回一个对象，这个对象可以像任何其他对象一样在模板中使用。
mapState 函数接受一个数组或对象作为第一个参数。这个数组或对象指定要映射的计算属性。数组的每个元素为状态的名称，对象的每个属性是状态的名称和计算属性的名称的映射关系。
如何使用 mapState？
我们可以在组件的计算属性部分使用 mapState 函数来映射 store 中的状态。在组件中，我们首先需要导入 mapState 函数，然后使用它将 store 中的状态映射到局部状态中。
以下是在 Vue.js 组件中使用 mapState 函数获取 Vuex 状态的值的示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ------
------ ------- -
--------- -
-------------
------ ----- -- -----------
--
-
-在这个示例代码中，我们使用 mapState 函数将 store 中的 count 状态映射到组件的局部计算属性 count 中。
如果我们有多个状态需要获取，我们可以将 mapState 函数的参数数组换成参数对象，对象的每个属性为状态映射到的局部计算属性的名称。
computed: {
...mapState({
count: state => state.count,
username: state => state.user.username,
todos: state => state.todos
})
}我们还可以使用组件的计算属性来访问映射后的状态。例如：
-- -------------------- ---- -------
----------
-----
--------- ----- ------
--------- -------- ------
----
--- ----------- -- ------ ---------------
-- --------- --
-----
-----
------
-----------
--------
------ - -------- - ---- ------
------ ------- -
--------- -
-------------
------ ----- -- ------------
--------- ----- -- --------------------
------ ----- -- -----------
--
-
-
---------在模板中，我们可以直接使用计算属性的名称来访问映射后的状态。
mapState 在 Vuex 中的用法
在 Vuex 中，我们还可以使用 mapState 函数来映射模块中的状态。
在 Vuex 应用程序中，我们可以将所有状态存储在一个对象中。我们还可以将状态拆分为模块，并将每个模块存储在单独的文件中。每个模块都可以使用单独的命名空间。
以下是一个使用 mapState 函数映射 Vuex 模块中状态的示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ------
------ ------- -
--------- -
--------------------------------- -
------ ----- -- -----------
--
-
-在这个示例代码中，我们使用 mapState 函数将模块 "some/nested/module" 中的 count 状态映射到组件的局部计算属性 count 中。
结论
mapState 辅助函数是 Vuex 提供的非常实用的函数之一，我们可以使用它轻松地映射 store 中的状态到组件中。在使用 mapState 函数时，我们需要注意展开运算符的使用方式，并将 state 映射到局部计算属性中。这种用法在团队协作和项目开发中非常方便，可以提高开发效率和代码维护性。
以上就是 Vue.js 2.0 中使用 mapState 获取 Vuex 状态的值的详细介绍，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff434366aa76bc7f38ba22