Vuex数据清空方法(用于用户登出等操作)
Posted 火腿肠烧烤大赛冠军
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex数据清空方法(用于用户登出等操作)相关的知识,希望对你有一定的参考价值。
Vuex持久化传送门:Vuex数据持久化
由于项目中需要一个用户登出的功能,而数据放在Vuex中在登出没有刷新时数据并不会更新
所以找到了这样一个很不错的方法
- 将state以各种方式保存
- 注册时调用函数赋值
- 清空时再将保存的state赋值替换当前的state
- over
首先默认state时要用新的方法注册
把数据写在函数的返回值中(其他方法也可以只要能调用)
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: '',
permList:[]
}
}
给Vuex中的state赋值并注册
const state = getDefaultState();
const store = new Vuex.Store({
modules: {
app,
settings,
state,
permissions
},
// state: {
// disinfectsList: []
// },
// mutations: {
// //为查询消毒信息列表存入数据
// setdisinfectsList(state, data) {
// state.disinfectsList = data
// }
// },
getters
})
在mutations中定义方法
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
页面中使用
commit('RESET_STATE');
以上是关于Vuex数据清空方法(用于用户登出等操作)的主要内容,如果未能解决你的问题,请参考以下文章