Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件
第一部分:手动存储vuex的 store 中的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex里面的数据就会被重新赋值,这样就会出现页面刷新vuex中的数据丢失的问题。 如何解决浏览器刷新数据丢失问题呢?方法一:全局监听,页面刷新的时候将 store 里 state 的值存到 sessionStorage 中,然后从sessionStorage 中获取,再赋值给 st
第一部分:手动存储
vuex的 store 中的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex
里面的数据就会被重新赋值,这样就会出现页面刷新vuex中的数据丢失的问题。 如何解决浏览器
刷新数据丢失问题呢?
方法一:全局监听,页面刷新的时候将 store 里 state 的值存到 sessionStorage 中,然后从
sessionStorage 中获取,再赋值给 store ,并移除 sessionStorage 中的数据。在 app.vue 中添
加以下代码:
//在根组件.vue中添加如下代码 app.vue
created () {
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('list', JSON.stringify(this.$store.state))
})
try {
sessionStorage.getItem('list') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('list'))))
} catch (err) {
console.log(err)
}
sessionStorage.removeItem('list')
}
第二部分:利用vuex-persistedstate插件
vue2写法
步骤:
第一步:运行如下的命令,安装持久化存储 vuex 中数据的第三方包:
npm i vuex-persistedstate
第二步:在 src/store/index.js
模块中,导入并配置 vuex-persistedstate
包:
默认存储到localStorage
//vuex:store.js文件内容如下
import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入包
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
// 2. 配置为 vuex 的插件
plugins: [createPersistedState()],
state: {
token: ''
...
},
})
想要存储到sessionStorage,配置如下
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})
vue3写法
1)首先:我们需要安装一个vuex的插件vuex-persistedstate
来支持vuex的状态持久化。
npm i vuex-persistedstate
2)然后:在src/store
文件夹下新建 modules
文件,在 modules
下新建 user.js
和 cart.js
src/store/modules/user.js
3)继续:在 src/store/index.js
中导入 user cart 模块。
import { createStore } from 'vuex'
import user from './modules/user'
import cart from './modules/cart'
import cart from './modules/category'
export default createStore({
modules: {
user,
cart,
category
}
})
4)最后:使用vuex-persistedstate插件来进行持久化
import { createStore } from 'vuex'
+import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
import cart from './modules/category'
export default createStore({
modules: {
user,
cart,
category
},
+ plugins: [
+ createPersistedstate({
+ key: 'erabbit-client-pc-store',
+ paths: ['user', 'cart'] //需要持久化的modules
+ })
+ ]
})
更多推荐
所有评论(0)