如何使用本地存储中的数据初始化存储

Question

我正在学习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包含用户，如何将用户放入存储区？

Answer 1

您可以直接从localStorage:加载初始状态值

state: {
user: JSON.parse(localStorage.getItem('user'))
},

由于您在设置时使用了JSON.stringify，因此在获取时使用JSON.parse。

Answer 2

一个更通用的解决方案可以是使用一个插件，将整个状态持久化到本地存储，这样你就不必处理单个值，并且当用户点击刷新时，整个应用程序仍然可用：

https://www.npmjs.com/package/vuex-persist

如果您想要更精细的控制，同时能够存储比字符串更复杂的数据类型，请查看localForage:

https://www.npmjs.com/package/localforage