Vue.js Vuex$存储属性在使用计算属性时不响应

我有一个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

属性，但当存储值更新时，组件不会注册此属性-旧值仍在模板上

---

我做错了什么？

如果设置正确，代码应该可以正常工作：

---

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

您应该显式声明状态形状，因此

state: {}

// or

state: {
  nav: {}
}

这样做：

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

或者属性不会是反应性的，如以下示例：

---

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

您不应该直接从组件方法操作存储对象，应该在存储对象上提交变体。突变是具有侦听器的函数，当调用时，会跟踪更改的变量并传播更改。如果您需要做一些异步的事情，比如向服务器提交数据，那么您甚至需要进一步定义存储上的操作，执行异步调用，然后从那里提交变量以更新状态对象。我知道这听起来很烦人，但一旦你习惯了，它就相当直截了当了

const store=新的Vuex.store({
声明：{
导航：{
键入：“默认情况下不宽”
}
},
突变：{
变更类型：（状态，类型）=>{
state.nav.type=类型；
}
}
})
Vue.component（'NavComponent'{
模板：“isWide？：{{isWide}}”，
计算：{
isWide（）{
返回此值。$store.state.nav.type==='wide'
}
}
})
新Vue({
el:“#应用程序”，
商店，
方法：{
变更类型（类型）{
此.$store.commit（'changeType'，type）；
}
}
})

变宽
变窄

实际上，您需要使用Vue.set（）函数使新属性成为被动属性

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

请参阅此代码笔：

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

这是我的问题

  const store = new Vuex.Store({
    state: {
      isTrackPlaying: false,
    },
  ...
  });

---

我忘记设置初始状态，现在它是被动的。

从

Vuex

存储向对象添加新属性时，您应该使用

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

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

或者用一个新的替换那个对象

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

---

从

我就是这样解决这个问题的：

我有包含其他对象的状态对象。每当发生变异时，我都尝试使用Vue.set，但它很混乱，仍然不起作用。 所以我创建了一个名为toggleState的布尔状态变量，并为它提供了一个getter。每当一个变异改变一个主状态对象时，它也会做

state.stateTokle=！state.stateTokle

。 任何关心的人都可以监视StateTouggle的更改，并做任何需要的事情。在我的例子中，它正在用变异的主要对象构建一个树状视图。

两者都是反应性的

$vm.$set

this.$set(some_object, 'key', 'value')

Vue.set

Vue.set(some_object, 'key', 'value')

---

这应该可以正常工作，这里没有任何错误。如何将值更新到Vuex状态？太棒了-这是正确的答案。我认为所有对象都是这样，而不仅仅是组件数据中的Vuex？相同。如果不提供初始状态，Vue无法将其转换为反应状态“并确保您确实更新了状态，可能问题在于您没有按照预期正确更新状态。”-这是问题“一个非常常见的错误是您没有提供状态初始数据”->这个。它在codepen上工作。我显然没有设置好它。我不会在我的vue应用程序中使用存储突变，因为我通常有太多的东西要从应用程序中的太多位置以太多不同的方式更改，要为每种情况编写一个函数，这将是一件很麻烦的事。嗨，尼克，你不必把所有东西都放在你在多个地方使用的只存储数据中，让组件拥有自己的数据和访问权，以存储通过计算的属性，并且要更新你需要通过任何方式发送它们。看来我可以在中更改数据也可以从组件内部存储（无突变）是的，有些人实际上不使用完整的vuex，而是执行以下操作。。。窗口级别上最简单的数据对象let state={user:'John'，age:38}；然后在vue数据中，只需放置data（）{state:state，something:'whatever'}如果您有多级数组，您将如何操作？像

something[0]。在[0]内部。值

？我认为最好的方法是制作多级数组的tmp副本，并进行更改。然后覆盖整个事情

一些事情
我确信这不是我的问题。绝望，我打开了你的视频。4:11我暂停了它，因为我意识到由于最近的局部更改，对象中的属性实际上不存在。谢谢你让我意识到。很高兴我的评论有帮助。这对Vue 3有何影响？我发现Vue未定义。您能告诉我如何在Vu3中更改它吗？Vue.set似乎不起作用。