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

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 未定义。

我的问题是：如果本地存储包含用户，如何将用户放入商店？

Answer 1

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

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

既然你在设置时使用，那么在获取时JSON.stringify使用。JSON.parse