Vuex 是一个现代的状态管理库，用于统一管理 Vue.js 应用程序中的数据状态。它使用了集中式存储模式，使得状态变化变得可追踪、可调试、可预测。但是，使用 Vuex 过程中也会遇到一些问题或者疑惑，下面将针对常见问题作出详细解答。
问题一：在 Vue 组件中使用 Vuex 中的 state，为什么要使用计算属性？
Vuex 中的 state 可以通过 Vuex.Store 实例中的 state 对象访问，但是在 Vue 组件中使用 Vuex 中的 state，需要通过计算属性来实现。为什么要用计算属性？
首先，计算属性可以缓存计算结果，减少计算次数，提高性能。其次，state 对象是响应式对象，当 state 变化时，Vue 组件会自动重新渲染。而计算属性也是响应式的，可以自动侦测依赖的 state 对象，当依赖的 state 变化时，自动重新计算并更新视图。因此，在计算属性中使用 state，可以更加灵活和方便地实现响应式。
示例代码：
// 定义计算属性
computed: {
count () {
return this.$store.state.count
}
}问题二：如何在 mutations 中更新异步数据？
Vuex 规定，mutations 中应当包含同步的修改状态的方法，而不应包含异步的操作。然而，有时候我们需要在 mutations 中更新异步数据，怎么办？
可以通过异步的 actions 封装改异步请求，再调用 mutations 修改状态。在异步 actions 中，通过 actions.commit() 方法来调用 mutations 中的方法，实现异步请求的状态修改。
示例代码：
-- -------------------- ---- -------
-- -- -------
-------- -
--------------- -- ------ -- -------- -
----------------------
--------- -- -
-------------------- ---------
--
-
-
-- -- ---------
---------- -
---------- ------- ----- -
---------- - ----
-
-问题三：如何在 Vuex 中使用插件？
Vuex 支持使用插件来扩展其功能，例如，可以使用 logger 插件来记录每次 mutation 的操作。如何在 Vuex 中使用插件呢？
可以通过 Vuex.Store 的 plugins 选项来使用插件。插件是一个函数，在函数中可以访问到 Vuex.Store 的实例，在插件中可以监听 state 的变化，或者添加新的 mutation。
示例代码：
-- -------------------- ---- -------
-- ----
----- -------- - ----- -- -
-- - ----- ------
-------------------------- ------ -- -
-------------------------- -----------------
--
-
-- ----
----- ----- - --- ------------
------ ------
---------- ------
-------- ------
-------- ----------
--问题四：如何使用 Vuex 数据持久化？
在开发中，可能需要使用 Vuex 来保存用户的配置信息、登录状态等，这些信息需要在用户下次访问时自动恢复。如何使用 Vuex 数据持久化？
可以借助 vuex-persistedstate 插件来实现。该插件使用浏览器 localStorage 或 sessionStorage 存储状态，当页面刷新时自动恢复状态。
示例代码：
-- -------------------- ---- -------
-- -- ------------------- --
------ -------------------- ---- ---------------------
----- ----- - --- ------------
------ ------
---------- ------
-------- ------
-------- -
----------------------
-------- ------------------- -- --------- ------- - ------------
--
-
--总结
本文介绍了常见的 Vuex 问题，并给出了详细的解答和示例代码。掌握 Vuex 的使用，将有助于提高 Vue.js 应用程序的状态管理能力，提高代码质量和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c679e968c7c53b0ec4e94