简介
vuex-sync-storage 是一个可以让 Vuex 实时同步到本地存储的 npm 包。它可以为前端开发者提供一种简单又实用的方式来保存 Vuex 的状态信息并让它们持久化。
安装
首先，你需要确保你已经安装了 Vuex，因为 vuex-sync-storage 依赖于 Vuex。
在项目目录下使用 npm 或者 yarn 安装：
npm install vuex-sync-storage --save # OR yarn add vuex-sync-storage
使用
引入
在项目中，你需要先引入 vuex-sync-storage：
import createVuexSyncStorage from 'vuex-sync-storage';
创建实例
紧接着，你需要使用 createVuexSyncStorage 创建一个实例并传入 Vuex 实例和一个对象，对象的 prefix 属性可以设置 localStorage 的前缀（可选）：
const vuexLocalStorage = createVuexSyncStorage({
prefix: 'myPrefix',
// 需要传入你的 Vuex.Store 实例，下面会介绍如何创建 Vuex Store
modules: { ... },
});创建 Vuex Store
在 Vuex 中，我们需要创建一个 Store 实例，它包含 state，mutations，actions 和 getters。
在我们的示例中，我们将创建一个名为 counter 的店，以便演示 vuex-sync-storage 的基础用法。
-- -------------------- ---- -------
------ ---- ---- -------
-------------- -- -- ----
----- ----- - --- ------------
------ -
------ - -- -----
--
---------- -
---------------- -
--------------
--
---------------- -
--------------
-
-
---使用 Vuex Plugin
我们可以使用 Vuex 插件来向 Vuex 实例添加我们的 vuex-sync-storage 插件。它可以帮助我们在 localStorage 中进行状态持久化，并在每次修改 state 时更新 localStorage。
import createVuexSyncStorage from 'vuex-sync-storage'; // 创建 vuex-sync-storage 实例 const vuexLocalStorage = createVuexSyncStorage(); // 将实例添加到 Vuex.Store 插件 store.plugin(vuexLocalStorage.plugin);
现在，我们可以在 localStorage 中保存 state 了：
// 设置 'count' 的值为 100
localStorage.setItem('count', 100);
// 直接从 localStorage 中获取 count
localStorage.getItem('count'); // 返回 '100'完整代码：
-- -------------------- ---- -------
------ --- ---- ------
------ ---- ---- -------
------ --------------------- ---- --------------------
--------------
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
--------------
--
---------------- -
--------------
-
-
---
----- ---------------- - ------------------------
--------------------------------------
--- -----
--- -------
------
--------- -
---- ------------
------ ----- -------
------- ------------------------------------------------------
------- ------------------------------------------------------
------
--
--------- -
------- -
------ ------------------------
-
-
---结论
vuex-sync-storage 是一个非常实用的 npm 包，可以让我们实现 Vuex 实时同步到本地存储，将状态信息持久化。在你的下一个 Vue 项目中，如果你需要使用 Vuex，那么这个插件肯定值得你一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d09270238226d0