Vuex未将isLogin变量更改为false()

Question

为什么此函数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;
});
}
}
})

Answer 1

您的突变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
}