使用计算属性 (Vuex) 时，$store 属性不是响应式的

Question

我有一个 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 属性，但是当存储值更新时，组件不会注册它 - 旧值仍在模板上。

我在这里做错了什么？

原文由 babbaggeii 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您正确设置所有内容，您的代码应该可以工作： http ://codepen.io/CodinCat/pen/RKZeZe?editors=1010

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

您应该明确声明状态形状，而不是

state: {}

// or

state: {
  nav: {}
}

做这个：

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

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

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

原文由 CodinCat 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

实际上，您需要使用 Vue.set() 函数来使新属性具有反应性。

 changeType () {
   Vue.set(this.$store.state.nav, 'type', 'wide');
}

请参阅此代码笔： https ://codepen.io/DedicatedManager/pen/JZgpaa

我为此主题制作了一个完整的屏幕截图视频：youtu.be/8GHczab2Lbs

原文由 Dedicated Managers 发布，翻译遵循 CC BY-SA 4.0 许可协议