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

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，但是状态属性在开发工具中会发生变化。

无法找出问题所在或如何进一步解决。

这是成功登录后的devtools state的屏幕截图：

Answer 1

这引起了我的注意：

export const states = {
  loggedIn: false
};

我怀疑您正在尝试使用如下所示的内容：

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

此操作无效，因为需要将其命名为state，而不是states。结果将是loggedIn是无效的，并且初始值为undefined。值更改时，不会刷新任何计算的属性，包括商店的getter。

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