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

Question

我正在使用带有 vuex 的 vue.js

在我的 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)
                })
        }
 }

在这个函数中，userdata 被设置为一个本地存储项。 我也用 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 都会返回错误 Unexpected token o in JSON at position 1 并且当我删除 JSON.parse 时它会返回 [对象对象]。但是当我使用 JSON.stringify 时，它会返回一个 json 对象，但这仅适用于第一次加载。

我觉得很混乱

请帮我弄清楚我应该使用什么来进行最佳实践。

Answer 1

问题出在这一行：

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

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

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

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