本地存储在重新加载时返回对象

Question

我正在使用 vue.js 和 vuex

在我的 vuex 操作中，我像这样调用外部 api：

 //actions.js
 getStudent({ commit }) {
        new Promise((resolve, reject) => {
            student.getStudent()
                .then(response => {
                        localStorage.setItem("userInfo", JSON.stringify(response.data.userData))
                        commit('UPDATE_USER_INFO', JSON.stringify(response.data.userData), { root: true })
                        resolve(response)
                })
        }
 }

在此函数中，用户数据被设置为本地存储项。我也用 commit

调用突变

当第一次执行此函数时，一切正常，例如以下代码：

//state.js
const userInfoLocalStorage = JSON.parse(localStorage.getItem("userInfo"))

const setUserRole = () => {
    const userRole = userInfoLocalStorage ? userInfoLocalStorage.role : 'student'
    return userRole
}

const state = {
    Role: setUserRole()
}

现在每当我重新加载页面时 JSON.parse returns 错误 Unexpected token o in JSON at position 1 ，当我删除 JSON.parse 时，它 returns [object Object]。但是当我使用 JSON.stringify 时，它 returns 一个 json 对象，但这只在第一次加载时有效。

我觉得很混乱

请帮我弄清楚我应该使用的最佳实践。

Answer 1

问题出在这一行：

const userRole = userInfoLocalStorage ? JSON.parse(userInfoLocalStorage).role : 'student'

您正在对一个对象 (userInfoLocalStorage) 调用 JSON.parse，该对象 (userInfoLocalStorage) 已在上面的行中用 JSON.parse 反序列化：

const userInfoLocalStorage = JSON.parse(localStorage.getItem("userInfo"))

相反，只需 const userRole = userInfoLocalStorage ? userInfoLocalStorage.role : 'student'

本地存储在重新加载时返回对象

localstorage returning object on reload

session-storage

vue.js