javascript - 如何使用本地存储中的数据初始化存储?
问题描述
我在学习 Vue (3) 和 vuex。
我有这家店:
export default new Vuex.Store({
state: {
user: null
},
mutations: {
setUserData (state, userData) {
state.user = userData
console.log('userData')
console.log(userData)
localStorage.setItem('user', JSON.stringify(userData))
axios.defaults.headers.common.Authorization = `Bearer ${userData.access_token}`
},
clearUserData () {
localStorage.removeItem('user')
location.reload()
}
},
actions: {
login ({ commit }, credentials) {
return axios
.post('/login', credentials)
.then(({ data }) => {
commit('setUserData', data)
})
},
logout ({ commit }) {
commit('clearUserData')
}
},
getters: {
isLogged: state => !!state.user,
user: state => state.user
},
在一个组件中,我想让用户像这样连接:
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
user: 'user'
})
},
data () {
return {
stores: [],
loading: false
}
},
created () {
console.log('toto')
console.log(this.user.id)
this.getStores()
},
用户第一次登录时,它工作正常:我可以在控制台中看到 user.id。
但是当我刷新页面(并且用户已连接)时,user.id 未定义。
我的问题是:如果 localstorage 包含用户,如何将用户放入商店?
解决方案
您可以直接从以下位置加载初始状态值localStorage
:
state: {
user: JSON.parse(localStorage.getItem('user'))
},
既然你JSON.stringify
在设置时使用JSON.parse
,在获取时使用。
推荐阅读
- python-3.x - 如何编写 Python 模式程序
- java - 我不明白这个 Java while 循环
- html - 对齐内容的对齐问题 - reactjs app
- java - 运行多个测试时会话 ID 无效
- python - background_gradient 按数据框而不是按列或行
- c++ - 通过选择以升序打印数组中的值的好处?
- pyspark - 如何在本地开发和测试 python 转换代码?
- delphi-10.3-rio - Metropolis如何设置父子窗体?
- python-3.x - 熊猫数据框整列到字符串数据类型
- exception - Typo3 缓存刷新异常 - 如何调试