如何监听从 API 加载的状态对象的变化？

Question

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

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

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

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

state.tools = response.tools;

其中响应是 100% 相同的，没有任何反应。状态对象有变化，也可以在 Vue 调试器中看到。

所以我尝试的是添加常量状态：{ 工具： { 工具 0：{ 状态：真实。状态： } } }

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

感谢任何提示！

Answer 1

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

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

来自文档：

Mutations Follow Vue's Reactivity Rules

Since a Vuex store's state is made reactive by Vue...

...

When adding new properties to an Object, you should either: Use Vue.set(obj, 'newProp', 123) or ...

您正在添加新道具。您应该设置如下：

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

Answer 2

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

Vue.set(object, key, value)

所以如果你在某个地方更深层次地使用它，你会得到：

let object = state.someLargeObject.SomeObjectInsideIt

Vue.set(object, key, value)

如何监听从 API 加载的状态对象的变化？

How to listen for changes in state object loaded from API?

vue.js

vuex