无法在 Ionic Vue 中从 Vuex getter 解析 JSON

Question

我有一个使用 Vuex 的 Ionic 项目。我创建了一个商店：

const store = new Vuex.Store({
state: {
    user: localStorage.getItem('userdata') || {}
},
getters: {
    getUser(state) {
        return state.user
    }
},
mutations: {
    setUser(state, user) {
        state.user = user
    },
    destroyUser(state) {
        state.user = null
    },
},
actions: {
        retrieveUser(context) {
            return new Promise((resolve, reject) => {
                axios.get('v1/user')
                    .then(response => {
                        const user = response.data.data
                        localStorage.setItem('userdata', JSON.stringify(user))
                        context.commit('setUser', user)

                        resolve(user)
                    })
                    .catch(error => {})
            })
        },
}
})

这部分工作如预期般完美。我的 localstore 包含 JSON 字符串。现在我尝试使用 getUser getter JSON.parsed return 字符串。这不起作用，因为它给了我一个毫无意义的解析错误，因为字符串工作得很好。

当我尝试像这样在 vue 组件中加载用户数据时

export default {
    data() {
        return {
            user: [],
        }
    },
    mounted() {
        this.loadUserData()
    },
    methods: {
        loadUserData() {
            let userData = JSON.parse(this.$store.getters.getUser)
            this.user = userData
        }
    },
}

它 return 将 JSON 数据作为代理 (??)

Proxy {id: 27, name: "English", firstname: "Harriet", fullname: "Harriet English", number: null, …}
[[Handler]]: Object
[[Target]]: Object
[[IsRevoked]]: false

（这是示例数据，因此未显示真实姓名）我无法使用。我也尝试过使用状态变量，本地存储内容，但没有用...

如何访问我的 JSON 数据？

Answer 1

当您在 API 调用后保存用户数据时，您将其作为 JSON.stringify(user) 存储在 localStorage 中，但您仅使用原始 user 数据更新商店。我想您应该将 API 调用处理程序更新为：

const user = response.data.data;
const strUser = JSON.stringify(user);
localStorage.setItem('userdata', strUser);
context.commit('setUser', strUser);

这应该允许您按照您在组件中尝试的方式解析数据，无论 state.user 是否已使用 localStorage 数据初始化，或者是否已在 API打电话。

无法在 Ionic Vue 中从 Vuex getter 解析 JSON

Cannot parse JSON from Vuex getter in Ionic Vue

ionic-framework

vue.js

vuex