uniapp中Vuex数据持久化

发布时间:2024年01月12日

问题

H5应用中存在Vuex中的数据在刷新页面后丢失了。

原因

Vuex的 store 中的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 Vue 实例,Vuex数据会重新初始化,导致页面刷新Vuex中的数据丢失的问题。

解决方法

使用 vuex-persistedstate 插件
1、在项目目录下执行:npm install --save vuex-persistedstate;
2、修改store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from "vuex-persistedstate"

Vue.use(Vuex)

const store = new Vuex.Store({
	plugins: [
		persistedState({
			storage: {
				getItem: key => uni.getStorageSync(key),
				setItem: (key, value) => uni.setStorageSync(key, value),
				removeItem: key => uni.removeStorageSync(key)
			}
		})
	],
	state:{//存放状态
        "username":'',
        "userid":''
    },
	mutations:{
		//...
	},
	actions:{
		//...
	},
	//...
})

export default store

使用后浏览器打开用控制台调试可看数据存放在 window.localStorage.vuex
这里其实就和调用uniapp提供的数据缓存API存放的数据位置一样了,官方文档链接:https://uniapp.dcloud.io/api/storage/storage.html

注意:在APP-PLUS环境下,这个数据在应用退出时默认不会被清空(或者说初始化)。

文章来源:https://blog.csdn.net/I_loveCong/article/details/135543847
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。