页面刷新 vuex 里面数据丢失问题

╰半橙微兮° 2023-01-09 12:56 129阅读 0赞

在页面刷新的时候， vuex 会初始化 state，这样 vuex 里面的有些值便会丢失。遇到这样的问题，我们一般需要配合本地存储来实现数据的持久化。（我们使用 localStorage 为例，也可以使用 sessionStorage、cookie）

###### 1、配合本地存储 ######

登录的时候需要存一下用户名和token，一般分别在 vuex 里面和本地都存一份

//拿到数据之后存储在 vuex 和 本地
    localStorage.setItem('name', name);
    this.$store.dispatch('token', token);
    
    //清空数据时，分别清空 vuex 和 本地
    localStorage.removeItem('name');
    this.$store.dispatch('token', '');
    
    //state.js 里面
    name: localStorage.getItem('name') ? localStorage.getItem('name') : '',
    token: localStorage.getItem('token') ? localStorage.getItem('token') : ''

这样能很好实现 vuex 数据的持久化，但是每一次数据的获取清除都需要写两个，很麻烦！我们也可使用插件来帮我们实现。

###### 2、 插件 vuex-persistedstate ######

[vuex-persistedstate][] 这个插件的原理是将 vuex 的 state 存到localStorage或sessionStorage或cookie中一份  
安装：

npm install vuex-persistedstate  --save

在store的index.js里面引入：

import persistedState from "vuex-persistedstate";
    export default new Vuex.Store({ 
    	state,
    	actions,
    	mutations,
    	plugins: [persistedState({ 
    		storage: window.sessionStorage, // 指定数据存储的位置，默认是localStorage 
    		reducer(val) {  // 存储指定state
    	       return {  // val 是state
    			  name:val.name,
    	          token:val.token
    	       }
    	    }
      	})]
    })

也可以创建新的插件实例，然后引入到 vuex 文件的 plugins 对象中。

import persistedState from "vuex-persistedstate";
    const persisted = persistedState({ 
    	storage: window.sessionStorage, // 指定数据存储的位置，默认是localStorage 
    	paths:['name','token']
    })
    export default new Vuex.Store({ 
    	state,
    	actions,
    	mutations,
    	plugins: [persisted]
    })

使用cookie

import persistedState from "vuex-persistedstate";
    import * as Cookies from 'js-cookie'
    export default new Vuex.Store({ 
    	state,
    	actions,
    	mutations,
    	plugins: [persistedState({ 
    		storage: { 
    			getItem: (key) => Cookies.get(key),
    			setItem: (key,value) => Cookies.set(key,value,{ expires: 8}),
    			removeItem: (key) => Cookies.remove(key)
    		}
      	})]
    })

###### 3、插件 vuex-along ######

[vuex-along][] 跟上面插件效果一样  
安装：

npm install vuex-along --save

在store的index.js里面引入：

import vuexAlong from 'vuex-along';
    export default new Vuex.Store({ 
    	state,
    	actions,
    	mutations,
    	plugins: [vuexAlong ({ 
    		name:'along', // 设置本地数据集合的名字，默认为 vuex-along
    		local: { 
    			list:['name','token'], // 是否存放在local中 false 不存放 如果存放按照下面session的配置配
    			isFilter:true // 过滤 list 中的字段而非保存
    		},
    		session:false //是否存放在 session 中 false 是不存放
      	})]
    })

[vuex-persistedstate]: https://www.npmjs.com/package/vuex-persistedstate
[vuex-along]: https://www.npmjs.com/package/vuex-along