使用计算属性(Vuex)时，$STORE属性不是反应性的

我有一个Vuex商店，我正在将其注入到我的实例中：

import store from '../store';
    
const mainNav = new Vue({
  el: '#main-nav',
  store,
  components: { NavComponent }
});

我正在从组件中的该存储创建一个计算属性：

computed: {
  isWide() {
    return this.$store.state.nav.type === 'wide';
  }
}

这会在组件初始化时为模板创建this.isWide属性，但在更新存储值时，组件不会注册此属性-旧值仍在模板上。

我在这里做错了什么？

---

解决方案

如果一切设置正确，代码应该可以运行：http://codepen.io/CodinCat/pen/RKZeZe?editors=1010

一个非常常见的错误是您没有提供州初始数据。

您应该显式声明状态形状，以便代替

state: {}

// or

state: {
  nav: {}
}

执行此操作：

state: {
  nav: {
    type: '...'
  },
  ...
}

或者属性不是反应性的，如下例：http://codepen.io/CodinCat/pen/ggxBEV?editors=1010

并确保您确实更新了状态，可能问题只是您没有按照预期正确更新状态。