Question

如果我像这样设置状态对象：

const state: {
    tools: {
        tool1: {
            status: true.
            state: 
        },
        tool2: {
            status: false.
            state: 1
        }
    }
}

在视图方面，当我使用变异更改示例状态时，一切都正确地更改。

但如果我使用API响应设置工具：

state.tools = response.tools;

响应100％相同没有任何反应。状态对象有变化，这也可以在Vue debuger中看到。

所以我尝试过添加 const状态：{ 工具：{ tool0：{ 状态：是的。州： } } }

并从ajax添加了tool1和tool1（所以我的对象有3个子元素tool0，tool1，tool3）。因此，如果我在tool1或tool2（由ajax加载）上触发更改，则不会发生任何事情。但是当我在tool0上触发更改（之前硬编码）时，一切正常 - 在这种情况下，也会应用在加载ajax的内容上设置的设置。

感谢任何提示！

Answer 1

您是否尝试使用Vue.set设置状态？

参考：https://vuex.vuejs.org/en/mutations.html

来自文档：

突变遵循Vue的反应性规则

由于Vuex商店的状态被Vue反应......

...

向对象添加新属性时，您应该：使用Vue.set(obj, 'newProp', 123)或...

您在这里添加新道具。您应该按如下方式设置：

Vue.set(state, tools, response.tools)

Answer 2

对于更一般的答案，Vue.set的语法是：

Vue.set（对象，键，值）

因此，如果你在深层某处使用它，你会得到：

让object = state.someLargeObject.SomeObjectInsideIt

Vue.set（对象，键，值）

如何监听从API加载的状态对象的更改？

2 个答案: