在 Vue.js 中，Vuex 是一个非常常用的状态管理库。它可以帮助我们更好地管理组件之间的状态。但有时候，我们需要把一些状态存储在客户端本地，这时候，vuex-local-state 就派上用场了。通过该 npm 包，我们可以在 Vuex 中使用 local storage。本文就将介绍该 npm 包的使用方式。
安装
你可以通过以下命令来安装 vuex-local-state：
npm install vuex-local-state
基本用法
在你的 store 中，先引入 vuex-local-state：
import Vuex from 'vuex' import VuexLocalState from 'vuex-local-state' Vue.use(Vuex)
然后，在 state 中定义你要存储的变量：
const state = {
count: 0,
message: ''
}接着，在 store 的 plugins 选项中使用 VuexLocalState 插件：
const store = new Vuex.Store({
state,
plugins: [VuexLocalState]
})现在，我们可以在 mutation 中使用 vuexLocalStorage 实例的 set 和 get 方法存取 local storage：
-- -------------------- ---- -------
---------- -
--------- ------- -
----------------------------- ----------- - --
----------- -- -
--
--------- ------- -
----------------------------- ----------- - --
----------- -- -
--
---------- ------- -------- -
------------------------------- --------
------------- - -------
-
-我们还可以在 store 的 modules 中使用该插件：
-- -------------------- ---- -------
----- ----- - --- ------------
-------- -
----------- -
----------- -----
------
-------- ----------------
-
-
--Vue 插件
你也可以将 VuexLocalState 作为 Vue 插件使用：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ---- ---- ------ ------ -------------- ---- ------------------ ------------- ----------------------- ----- ----- - --- ------------ --- --
使用示例
下面的代码展示了如何在 Vue 组件中使用 vuex-local-state：
-- -------------------- ---- -------
----------
-----
-------- -- ----- -------
------- -------------------------------------
------- -------------------------------------
----- ------- ------
------ ----------------- --
------- ----------------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- --
-
--
--------- -
------- -
------ -----------------------
--
--------- -
------ -------------------------
-
--
-------- -
------------------ -
-------------------------------
--
------------------ -
-------------------------------
--
------------------- -
-------------------------------- -------------
-
-
-
---------总结
到这里，我们已经完成了 vuex-local-state 的使用教程。通过该npm包，我们可以非常方便地在 Vuex 中使用 local storage。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562bf81e8991b448e0013