时间戳

首页 > 解决方案 > Vuex 不会将 isLogin 变量更改为 false()

vue.js - Vuex 不会将 isLogin 变量更改为 false()

问题描述

为什么这个功能context.commit('changeIsLogin', false);在之后不起作用

logout() {
  localStorage.removeItem('token');
  this.$store.dispatch('asyncValidateToken'); 
}

在这段代码中？isLogin 不会更改为 false：

export default function (/* { ssrContext } */) {
    const Store = new Vuex.Store({
        state: {
            isLogin: false
        },
        mutations: {
            changeIsLogin (state, payload) {
                state.isLogin += payload
            }
        },
        actions: {
            asyncValidateToken: async (context, payload) => {
                await api.post('/accounts/token', '', {
                  headers: {
                        'Authorization': `Bearer ${localStorage.token}`,
                    }
                })
                .then(response => {
                    context.commit('changeIsLogin', true);
                    console.log(response.data);
                    return true
                }, response => {
                    context.commit('changeIsLogin', false);
                    console.error(response.data);
                    return false;
                });
            }
        }
    })

标签： vue.jsvuex

解决方案

您的突变changeIsLogin基本上是将有效负载添加到当前状态。所以你的代码：

changeIsLogin (state, payload) {
    state.isLogin += payload
}

基本上相当于：

changeIsLogin (state, payload) {
    state.isLogin = state.isLogin + payload
}

由于布尔值在对其进行算术运算时可以像数字一样起作用，因此您将遇到以下问题：

state.isLogin = false
payload = true
--> 
state.isLogin = true + false = 1

state.isLogin = 1
payload = false
--> 
state.isLogin = 1 + false = 1

等等。

所以你所要做的就是删除算术运算：

changeIsLogin (state, payload) {
    state.isLogin = payload
}

推荐阅读