Vue 3 计算不刷新

Posted 2023-02-22

【中文标题】Vue 3 计算不刷新

【英文标题】：Vue 3 computed not refreshing

【发布时间】：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吗？

【参考方案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')