Vuex 和 localStorage / sessionStorage 的区别
| 特性 | Vuex | localStorage | sessionStorage |
|---|---|---|---|
| 存储位置 | 内存中（默认情况下刷新页面丢失） | 浏览器本地存储，页面刷新后数据依然存在 | 当前会话存储，页面刷新后数据存在，但关闭页面丢失 |
| 生命周期 | 页面刷新后重置，除非使用持久化插件 | 永久保存，手动清除前一直存在 | 仅在当前会话有效，页面关闭后自动清除 |
| 数据容量 | 较大，可存储任意复杂的数据 | 约 5 MB，适合存储简单数据 | 同 localStorage |
| 数据类型 | 支持任意数据类型（对象、数组、字符串等） | 只能存储字符串，需要手动序列化和反序列化 | 同 localStorage |
| 作用 | 管理全局状态，适合组件间数据共享 | 适合持久化存储简单数据（如用户配置、token 等） | 适合临时存储简单数据（如页面状态、临时信息） |
| 响应式 | 响应式（状态变化自动更新视图） | 非响应式，数据改变不会自动更新 UI | 非响应式，数据改变不会自动更新 UI |
如何让 Vuex 持久化？
由于 Vuex 的状态默认保存在内存中，页面刷新后会丢失，可以通过以下几种方式实现 Vuex 状态持久化：
1. 手动结合 localStorage / sessionStorage 持久化
原理：
- 在 Vuex 初始化时，从
localStorage/sessionStorage读取数据恢复状态。 - 在 Vuex 状态变化时，将数据同步到本地存储。
示例代码：
// store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// 从 localStorage 获取初始状态
const savedState = JSON.parse(localStorage.getItem("vuexState")) || {};
const store = new Vuex.Store({
state: {
user: savedState.user || { name: "", token: "" }, // 恢复 user 状态
cart: savedState.cart || [] // 恢复 cart 状态
},
mutations: {
setUser(state, user) {
state.user = user;
},
addToCart(state, item) {
state.cart.push(item);
}
}
});
// 监听状态变化，并保存到 localStorage
store.subscribe((mutation, state) => {
localStorage.setItem("vuexState", JSON.stringify(state));
});
export default store;
步骤说明：
- 在
state初始化时，从localStorage读取状态数据。 - 通过
store.subscribe()监听状态变化，并将最新的状态存储到localStorage。 - 页面刷新时，Vuex 状态会自动从
localStorage恢复。
2. 使用第三方库 vuex-persistedstate
vuex-persistedstate 是一个专门用于 Vuex 状态持久化的插件，可以轻松实现 Vuex 状态与本地存储（localStorage 或 sessionStorage）的自动同步。
安装：
npm install vuex-persistedstate
使用方法：
import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate"; // 引入插件
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
user: { name: "", token: "" },
cart: []
},
mutations: {
setUser(state, user) {
state.user = user;
},
addToCart(state, item) {
state.cart.push(item);
}
},
plugins: [createPersistedState()] // 持久化插件
});
export default store;
插件特点：
- 状态会自动保存到
localStorage（默认）。 - 页面刷新时，状态会自动恢复。
自定义存储位置（sessionStorage）：
plugins: [createPersistedState({
storage: window.sessionStorage // 使用 sessionStorage
})]
3. 结合 Cookie 实现持久化
在一些需要更高安全性的场景下（例如存储 token），可以使用 Cookie 来持久化 Vuex 状态。
示例代码：
import Vue from "vue";
import Vuex from "vuex";
import Cookies from "js-cookie";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: Cookies.get("token") || ""
},
mutations: {
setToken(state, token) {
state.token = token;
Cookies.set("token", token, { expires: 7 }); // 7 天过期
}
}
});
export default store;
特点：
Cookies可设置过期时间，提高安全性。- 适合存储小数据，如认证
token。
4. 使用 Vuex + IndexedDB（适合大数据量场景）
对于需要存储大量数据的场景，localStorage 和 sessionStorage 容量有限（约 5MB）。此时可以使用 IndexedDB 结合 Vuex 进行持久化。
- IndexedDB 是浏览器提供的数据库，可以存储大量数据。
- 可以使用第三方库如
localforage，结合vuex-persistedstate使用。
总结： Vuex 持久化方案
| 方案 | 适用场景 | 特点 |
|---|---|---|
| localStorage | 持久化存储数据，页面刷新或关闭后仍可恢复状态 | 简单易用，数据永久保存，容量有限 |
| sessionStorage | 临时存储数据，页面关闭后自动清除 | 数据仅在会话期间有效 |
| vuex-persistedstate | 中小型项目，快速实现 Vuex 持久化 | 插件简洁易用，支持 localStorage 和 sessionStorage |
| Cookie | 安全性高，适合存储认证信息（如 token） | 支持过期时间，安全性较高，但容量较小 |
| IndexedDB | 需要存储大量数据的场景 | 数据库存储，容量大，适合复杂场景 |
结合项目场景
- 对于中小型项目，推荐使用
vuex-persistedstate插件，将数据保存到localStorage或sessionStorage。 - 对于安全性敏感的数据（如
token），推荐使用 Cookie 并设置过期时间。 - 对于大数据量场景，推荐使用 IndexedDB。
