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

【问题标题】：How to listen for changes in state object loaded from API?如何监听从 API 加载的状态对象的变化？
【发布时间】：2016-11-08 12:35:43
【问题描述】：

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

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）。因此，如果我在 tool1 或 tool2（由 ajax 加载）上触发更改，则什么也没有发生。但是当我在 tool0 上触发更改（之前硬编码）时，一切正常 - 在这种情况下，还应用了在 ajax 加载的内容上设置的设置。

感谢任何提示！

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

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

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

来自文档：

变异遵循 Vue 的反应规则

由于 Vuex 商店的状态是由 Vue 做出的反应...

...

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

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

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

【讨论】：

感谢您的回答。错过了......因为我正在从数组更改为对象。在没有 Vue.set hack 的情况下，它可以在数组上正常工作；）
我很想知道如何在较低的子组件中执行此操作。每当我尝试我认为是等效的 this.$set(state, tools, response.tools) 时，我都会得到“未定义状态”。
当你在一个 Vue 组件中时，状态需要被引用为this.$store.state。在 Vuex 中，根据api docs，状态作为函数参数传递给动作和突变处理程序。因此，如果您将您的操作处理程序定义为yourCustomAction: function({ commit, state }, payload) {...}，那么您可以直接访问state。我仍然更喜欢将我的操作定义为myCustomAction: function(context, payload){...}，并将访问状态定义为context.state。

【解决方案2】：

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

Vue.set(对象、键、值)

因此，如果您在某个深层次的地方使用它，您会得到：

让 object = state.someLargeObject.SomeObjectInsideIt

Vue.set(对象、键、值)

【讨论】：