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

如果我设置状态对象是这样的：如何监听从API加载的状态对象的更改？

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

上观看侧的一切都正确改变，当我使用突变例如状态更改。

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

state.tools = response.tools;

，其中反应是100％相同的什么也没有发生。状态对象有变化，这也可以在Vue debuger中看到。

所以我曾尝试是添加常量状态：{ 工具：{ TOOL0：{ 状态：真。状态： }} }

，并从阿贾克斯添加工具1和工具1（所以我的目标有3子元素TOOL0，TOOL1，tool3）。所以如果我触发tool1或tool2（由ajax加载）的变化，什么也没有发生。但是当我在tool0上触发更改（之前进行了硬编码）时，一切正常 - 在这种情况下，也会应用设置在ajax加载内容上的设置。

感谢您的任何提示！

来源

2016-11-08 M.V.

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

编号：https://vuex.vuejs.org/en/mutations.html

从文档：

突变跟随Vue公司的反应性规则

由于Vuex店内的状态是由Vue公司做出反应......

。 ..

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

您正在此处添加新的道具。您应该将其设置如下：

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

来源

2016-11-08 14:00:50 Mani

感谢您的回答。错过了...因为我正在从数组变为对象。在阵列上它没有Vue.set破解工作正常;） –

我很想知道如何在较低的子组件中做到这一点。每当我尝试我所假设的等价的'this。$ set（state，tools，response.tools）'我只是'没有定义状态'。 – daninthemix

当您处于Vue组件中时，需要将状态引用为“this。$ store.state”。在Vuex中，根据[api文档]（https://vuex.vuejs.org/en/api.html），状态作为函数参数传递给动作和突变处理程序。因此，如果您将您的操作处理程序定义为'yourCustomAction：function（{commit，state}，payload）{...}'，那么您可以直接访问'state'。我仍然更喜欢将我的动作定义为'myCustomAction：function（context，payload）{...}'并将访问状态定义为'context.state'。 – Mani

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

回答

相关问题