状态更改时不会更新计算属性

Question

我们正在尝试使用vuex 存储状态：loggedIn 检测一个人是否已登录。当我从操作中调用 API 服务时，它会在成功登录后调用 mutation 并更改状态中的数据：

loginSuccess(state, accessToken) {
    state.accessToken = accessToken;
    state.authenticating = false;
    state.loggedIn = true;
    console.log(state.loggedIn);
  }

console.log() 显示了该值，因此突变正在起作用。

在我的另一个组件中，我使用计算属性来监视使用 ...mapState() 的商店中的更改，并将该属性绑定到模板视图中：

computed: { 
    ...mapState('authStore',['loggedIn' ]);
  }

但视图永远不会根据计算的属性进行更新。我在控制台中使用 Vue 开发工具进行了检查。它显示状态变化。

我已经初始化了状态。

export const states = {
  loggedIn: false
};

我尝试过直接调用状态。

this.$store.state.authStore.loggedIn;

我尝试了不同的方法。

...mapState('authStore', { logging:'loggedIn' });
//or
...mapState('authStore',['loggedIn' ]);

另外，尝试了 watch: {} 钩子但没有工作。

有趣的是，状态的getter 总是显示undefined，但在开发工具中状态属性会发生变化。

不知道哪里出了问题，也不知道如何继续前进。

这里是devtoolsstate登录成功后的截图：

Answer 1

这引起了我的注意：

export const states = {
  loggedIn: false
};

我怀疑你是在尝试像这样使用它：

const store = {
  states,
  mutations,
  actions,
  getters
}

这不起作用，因为它需要被称为state 而不是states。结果将是loggedIn 是无反应的并且具有初始值undefined。任何计算属性，包括存储的 getter，都不会在值更改时刷新。

无论我的理论是否正确，我建议在loginSucess的开头加上console.log(state.loggedIn);，以确认突变前的状态。