随着 Vue.js 在前端开发中的广泛应用，Vuex 作为它的状态管理方案也成为了主流之一。然而在实际开发中，有些场景下需要对状态进行重置（例如用户登出后将所有状态清空），此时使用 Vuex 自带的 action 会显得有些麻烦。针对这一问题，有一款 npm 包 vuex-action-reload 可以帮助我们更便捷地重置状态。本篇教程将详细介绍它的使用方法。
安装
使用 npm 可以很方便地安装 vuex-action-reload：
npm install vuex-action-reload
用法
首先在 store 的根目录下新建一个 reset.js 文件，用于定义重置状态的 action：
-- -------------------- ---- -------
------ ------- -------- ----- ------- -
--------------------------------------------------------- -- -
-- -------------------------------------------------------------- -
----------------------------------
------
-
-- ------- ----- --
------------------------------------------------------------------- -- -
----- ------------ - ----------------------------------------------------- - -------------------
--------------------------------- ---------- -
------ - -------------------------------------------------- --
---------- -
-------------- ------- -
-------------------- ------------------------------------------------
-
-
-- - -------------- ----- --
----- ------ - ------------------------------ - -------- - ----------
---------------------------
----------------------------------- ----------
--
--
-其中，reset 函数的参数 store 是我们在创建 Vuex.Store 实例时传入的对象。
之后，在 store 的根模块下添加一个 mutations，用于提供重置状态的方法：
-- -------------------- ---- -------
----- ----- - - --- -
----- --------- - -
---------- ------- -
-------------------- ------------------
--
----------------------- ------- -
------------------------------ -- -
------------------------- ------------------------------------
--
-
-
------ ------- -
----------- -----
------
---------
-这里使用了一个重要的方法 getDefaultState 和 getDefaultModuleNameStateKey。它们分别返回了根模块的初始状态以及指定模块某个状态的初始值:
function getDefaultState () {
return { ... }
}
function getDefaultModuleNameStateKey () {
return { ... }
}接下来，在 store 的 index.js 中导入依赖，并在 actions 中使用 vuex-action-reload：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ -------------------- ---- ---------------------
------ ----- ---- ---------
-------------
----- ----- - --- ------------
-------- -
----- -
-------- -
------
------
---
--
---
-
--
-------- -
----------------------
---- -------
-------- ---------------------
--
--
-------- -
------ -- -
------------
-
-
--
------ ------- -----此时，我们就可以在任意组件中使用 reload action 来调用 reset 方法了。例如，在按钮的 click 事件中：
methods: {
handleClick () {
this.$store.dispatch('reload')
}
}示例代码
在本地新建一个 Vue 项目，根据以上步骤配置好 Vuex 和 vuex-action-reload，然后使用以下代码进行测试：
-- -------------------- ---- -------
----------
-----
----
--- ------------- ------ -- ------ -------------
-- ---- --
-----
-----
------- ------------------------ -------------
------
-----------
--------
------ ------- -
--------- -
----- -- -
------ ----------------------------------
-
--
-------- -
--------- -- -
------------------------------
-
-
-
---------以上代码将会对根模块下的 demo1 模块进行重置，将其列表状态的项数从 3 重置为初始值 2。
总结
使用 vuex-action-reload 可以让我们更方便地对 Vuex 状态进行重置。通过定义 reset action 和 mutations，我们可以像调用其他 action 一样调用 reload 效果。然而在使用过程中，我们需要主要保证 state 的定义规范以及保证指定的状态在 mutations 中正确地定义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cc981e8991b448e64f4