如何監聽從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加載的狀態對象的更改？

回答

相關問題