Vue 3 计算不刷新答案

【问题标题】：Vue 3 computed not refreshingVue 3 计算不刷新
【发布时间】：2022-01-16 02:07:00
【问题描述】：

我正在尝试使用 Vue 3 制作登录表单，但我很难获得“实时”状态或计算状态。所以当我尝试从模板登录用户时，它看起来像这样。

<button class="login-button" type="button" @click="$store.dispatch('login', {email, password})">
  Sign In
</button>

这个按钮工作正常，它正在发送数据并使用 vuex 向后端发出请求，如下所示：

actions: {
        async login(commit: any, payload: any ) {
            API.post('/login', {
                email: payload.email,
                password: payload.password
            })
                .then((response) => (
                    localStorage.setItem('user', response.data.token)
                    )
                ).catch((e) => (
                    console.log(e.message)
                )
            )
        }
    },

正如您在操作中看到的，它在 localStorage 中设置用户数据，因此在状态下，我定义用户如下：

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

它会设置一切，直到现在。所以现在，当我尝试在导航中获取此状态时，它不会在不刷新页面的情况下更新它。我得到它像：

computed: {
    token() {
        return this.$store.state.user.user
    }
  },

为什么要使用此代码刷新页面？我做错了什么？

【问题讨论】：

但是我看不出你在你的行动中实际上犯了什么login？此时真的要设置user.user吗？

标签： javascript vue.js vuejs3

【解决方案1】：

您正在尝试设置非 vue 对象。

app.mixin({
    data() {
        return {
            localStorage: {
                get(prop) {
                    return this[prop]
                },
                set(prop, val) {
                    window.localStorage.setItem(prop, val)
                    return this[prop] = val
                }
            }
        }
    },
    created() {
        window.localStorage.__proto__.get = prop => this.localStorage.get(prop)
        window.localStorage.__proto__.set = (prop, val) => this.localStorage.set(prop, val)
        window.localStorage.__proto__.get.apply(this)
        window.localStorage.__proto__.set.apply(this)
    }
})

localStorage.get('propName')
localStorage.set('propName', 'value')

state: {
    get user() {
        return localStorage.get('user')
    }
}

【讨论】：