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

【问题标题】：How to init the store with data from the localstorage?如何使用本地存储中的数据初始化存储？
【发布时间】：2021-03-10 20:57:15
【问题描述】：

我是一个学习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包含用户，如何将用户放入商店？

【问题讨论】：

标签： javascript vue.js vuejs2 local-storage vuex

【解决方案1】：

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

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

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

【讨论】：

每次访问状态时，JSON 是否都会从磁盘解析本地存储？还是这只是初始值？
@partofthething - 只是初始值。如果要更改存储，请在更改状态的突变中进行（或在调用该突变的操作中）。

【解决方案2】：

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

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

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

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

【讨论】：

为什么用户数据首先变得未定义，它不应该在刷新时保持不变。是 vuex 的东西吗？
@YemiKudaisi 这是浏览器的正常行为，当您关闭选项卡时，数据就消失了。防止这种情况的唯一方法是在本地存储状态并在再次访问同一网站时检索它。 Vuex 在一个会话中集中维护状态，这样当你转到不同的页面时，你仍然可以访问它。但这仅在您有效地仍在应用程序中时有效，当您离开应用程序并返回时它无济于事。