Vuex Store 数据在页面刷新后丢失的解决方法
作者：Wu Youlu
解决 Vuex Store 数据在页面刷新后丢失的方法
当我们使用 Vue.js 和 Vuex 进行状态管理时，一个常见的问题是页面刷新会导致 Vuex store 中的数据丢失。这是因为 Vuex store 的数据默认存储在内存中，页面刷新会重新加载整个应用。本文将详细介绍几种解决方法。
问题原因
Vuex 的设计初衷是为了管理应用的状态，它并不会在页面刷新后自动持久化数据。当页面刷新时，浏览器会重新加载整个页面，Vuex store 也会被重新初始化，因此之前存储在 Vuex 中的数据会丢失。
Vuex Persistedstate 插件
Vuex Persistedstate 可以将 Vuex store 中的状态持久化到客户端的存储中，比如 localStorage、sessionStorage 等。这样，在用户刷新页面或重新打开浏览器时，应用的状态依然可以被保留。
安装
你可以使用 npm 或 yarn 来安装 Vuex Persistedstate：
# 使用 npm npm install vuex-persistedstate # 使用 yarn yarn add vuex-persistedstate
基本使用
安装完插件后，需要在 Vuex store 中引入并使用它。下面是一个基本的使用示例：
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 定义状态
},
mutations: {
// 定义突变
},
plugins: [
createPersistedState()
]
});
export default store;在上面的示例中，我们使用了 createPersistedState 函数，它会自动将 Vuex store 的状态保存到 localStorage 中。
配置选项
createPersistedState 函数接受一个配置对象，你可以根据需求自定义一些选项。下面是一些常用的配置项：
key
默认情况下，Vuex Persistedstate 会将状态存储在 localStorage 中的 vuex 键下。你可以通过 key 选项自定义这个键名：
createPersistedState({
key: 'my-app-store'
})paths
如果你只想持久化部分状态，可以使用 paths 选项来指定要持久化的状态路径：
createPersistedState({
paths: ['moduleA.stateItem1', 'moduleB']
})storage
storage 选项允许你指定使用哪种类型的存储，默认是 localStorage。你可以将其设置为 sessionStorage 或者自定义的存储对象：
createPersistedState({
storage: window.sessionStorage
})
// 使用自定义存储对象
const customStorage = {
getItem: (key) => { /* 获取项目 */ },
setItem: (key, value) => { /* 设置项目 */ },
removeItem: (key) => { /* 移除项目 */ }
};
createPersistedState({
storage: customStorage
})getState 和 setState
这两个选项允许你自定义获取和设置状态的逻辑：
createPersistedState({
getState: (key, storage) => {
// 自定义获取逻辑
},
setState: (key, state, storage) => {
// 自定义设置逻辑
}
})reducer
reducer 选项允许你自定义状态的持久化逻辑，通过它你可以只持久化状态的一部分数据：
createPersistedState({
reducer: (state) => {
return {
moduleA: state.moduleA,
moduleB: {
item1: state.moduleB.item1
}
}
}
})filter
filter 选项允许你指定哪些突变会触发状态的持久化：
createPersistedState({
filter: (mutation) => {
return mutation.type === 'SOME_MUTATION'
}
})完整示例
下面是一个包含多个配置项的完整示例：
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
moduleA: {
stateItem1: 'value1',
stateItem2: 'value2'
},
moduleB: {
item1: 'value3',
item2: 'value4'
}
},
mutations: {
SOME_MUTATION(state, payload) {
// 突变逻辑
}
},
plugins: [
createPersistedState({
key: 'my-app-store',
paths: ['moduleA.stateItem1', 'moduleB'],
storage: window.sessionStorage,
reducer: (state) => {
return {
moduleA: state.moduleA,
moduleB: {
item1: state.moduleB.item1
}
}
},
filter: (mutation) => {
return mutation.type === 'SOME_MUTATION'
}
})
]
});
export default store;简洁版
const localStorage = ["token","permissions"];
const sessionStorage = ['userInfo'];
export default new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage,
paths: sessionStorage
}), createPersistedState({
storage: window.localStorage,
paths: localStorage
})],
getters,
state,
mutations
})总结
Vuex Persistedstate 是一个强大且易于使用的插件，能够帮助我们在 Vue.js 应用中持久化 Vuex store 的状态。通过灵活的配置项，你可以根据需求定制状态的持久化方式，满足不同的业务场景。
手动持久化数据
保存数据
如果需要更精细地控制持久化过程，可以手动将 Vuex store 的数据保存到 localStorage 或 sessionStorage 中。在相关的 mutation 或 action 中实现数据保存逻辑。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
user: JSON.parse(localStorage.getItem('user')) || null,
token: localStorage.getItem('token') || null
},
mutations: {
setUser(state, user) {
state.user = user;
localStorage.setItem('user', JSON.stringify(user));
},
setToken(state, token) {
state.token = token;
localStorage.setItem('token', token);
}
},
actions: {
login({ commit }, { user, token }) {
commit('setUser', user);
commit('setToken', token);
}
}
});
export default store;加载数据
在 Vuex store 初始化时，我们可以从 localStorage 或 sessionStorage 中加载数据。这样，当应用启动时，数据就会被恢复到 Vuex store 中。
使用 IndexedDB 安装
localForage
localForage 是一个库，它为我们提供了对 IndexedDB、WebSQL 和 localStorage 的简单一致的 API。我们可以使用它来简化 IndexedDB 的操作。
npm install localforage
配置和使用
在 Vuex store 中引入 localForage 并配置数据持久化。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import localforage from 'localforage';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
user: null,
token: null
},
mutations: {
setUser(state, user) {
state.user = user;
localforage.setItem('user', user);
},
setToken(state, token) {
state.token = token;
localforage.setItem('token', token);
}
},
actions: {
login({ commit }, { user, token }) {
commit('setUser', user);
commit('setToken', token);
},
loadUser({ commit }) {
localforage.getItem('user').then(user => {
if (user) {
commit('setUser', user);
}
});
localforage.getItem('token').then(token => {
if (token) {
commit('setToken', token);
}
});
}
}
});
// 应用启动时加载用户数据
store.dispatch('loadUser');
export default store;工作原理
localForage 使用 IndexedDB 作为默认的存储机制。它提供了与 localStorage 类似的 API，但支持更大的数据存储和更复杂的数据结构。当应用启动时，我们可以从 IndexedDB 中加载数据并恢复到 Vuex store 中。
总结
通过以上方法，我们可以有效地解决 Vuex store 数据在页面刷新后丢失的问题。根据不同的需求和场景，选择合适的持久化方案。如果需要快速简便的解决方案，可以使用 vuex-persistedstate 插件；如果需要更大的存储空间和更复杂的数据结构，localForage 是一个不错的选择。
到此这篇关于解决 Vuex Store 数据在页面刷新后丢失的方法的文章就介绍到这了,更多相关Vuex Store 页面刷新后丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！