使用计算属性时,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在组件初始化时为模板创建了属性,但是当更新存储值时,组件不会注册它 - 旧值仍在模板上.

我在这做错了什么？

Answer 1

如果您正确设置了所有内容,您的代码应该可以正常工作:http://codepen.io/CodinCat/pen/RKZeZe？edit = 1010

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

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

state: {}

// or

state: {
  nav: {}
}

做这个:

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

或者属性不会被动反应,例如:http://codepen.io/CodinCat/pen/ggxBEV？editors = 1010

并确保您确实更新了状态,也许问题只是您未按预期正确更新状态.

Answer 2

从您的Vuex商店向对象添加新属性时，您应该使用

Vue.set(obj, 'newProp', 123)

或用新的对象替换该对象

state.obj = { ...state.obj, newProp: 123 }

来自Vuex 文档

Answer 3

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

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

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

我做了一个关于该主题的全屏视频：youtu.be/8GHczab2Lbs