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加载初始状态值：

声明：{ 用户：JSON.parselocalStorage.getItem'user' },

---

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

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

声明：{ 用户：JSON.parselocalStorage.getItem'user' },

---

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

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

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

---

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

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