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

$store properties are not reactive when using computed property (Vuex)(使用计算属性(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

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

这篇关于使用计算属性(Vuex)时，$STORE属性不是反应性的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！