通过vuex把信息存在localstorage,但是刷新页面后,页面获取的登录信息会丢失
时间: 2024-03-12 20:45:36 浏览: 58
是的,使用 Vuex 把信息存在 localstorage 中,可以让数据在页面刷新后依然存在,但是需要注意一些细节。
首先,需要在 Vuex 的 store 中添加一个插件,来监听 state 的变化并将其存储到 localstorage 中。可以通过以下代码实现:
```
const myPlugin = store => {
store.subscribe((mutation, state) => {
localStorage.setItem('my-store', JSON.stringify(state))
})
}
export default new Vuex.Store({
state: {
// ...
},
mutations: {
// ...
},
plugins: [myPlugin]
})
```
此外,还需要在创建 store 实例时,从 localstorage 中读取之前存储的 state 数据,并初始化 store。可以通过以下代码实现:
```
const state = JSON.parse(localStorage.getItem('my-store') || '{}')
export default new Vuex.Store({
state,
mutations: {
// ...
},
plugins: [myPlugin]
})
```
以上代码中,`my-store` 是用于存储 state 数据的 key,可以根据实际情况修改。
需要注意的是,如果用户在不同的浏览器或设备上登录,那么 localstorage 中存储的 state 数据是不同的,因此需要结合后端接口,来确保用户在不同设备上的登录状态是同步的。
阅读全文