2017-09-07 64 views
3

我使用的是開源vuejs + vuex項目,這是我目前有知道如何從一個組件到另一個觸發事件問題的根源https://github.com/misterGF/CoPilot/tree/master/src/components如何同步觀看vuex中的狀態變化?

我可以用this.$state.store.commit("foo", "bar")存儲在vuex信息,但是當兩個不同的有兩個區別export default {}我不知道我怎樣才能使應用程序知道只要「富」是所示例改爲「巴茲」 ......除非我刷新/重新加載應用程序,有沒有辦法讓我知道這些變化

回答

5

在你的組件上使用$ store.watch。 Created()是放置它的好地方。您將它傳遞給監視的狀態,然後指定其更改時的回調。 Vuex文檔沒有提供很好的例子。有關this Vuejs Forum page的更多信息,商店手錶的功能與vm。$ watch相同,因此您可以閱讀更多關於here in the Vue docs的信息。

this.$store.watch(
    (state)=>{ 
    return this.$store.state.VALUE_TO_WATCH // could also put a Getter here 
    }, 
    (oldValue, newValue)=>{ 
    //something changed do something 
    console.log(oldValue) 
    console.log(newValue) 
    }, 
//Optional Deep if you need it 
    { 
     deep:true 
    } 
) 
+0

這不適合我,出於某種原因 – hidar

+0

對不起,延遲。我以爲我已經接受了答案。無論如何,我只是來問一件事,我希望沒關係。如果我同時觀看多個國家,我該如何回報兩件事?你的例子用'.VALUE_TO_WATCH'顯示一個返回值,但是我的狀態有多個值。我可以返回整個狀態,但其中存儲了大量內容。所以,我希望找到一個解決方案,如何只返回一個 – hidar

+0

@hidar你可以使用兩個觀察者嗎?或者你可以創建一個基於這兩個值的吸氣劑並觀察吸氣劑。 –

4

你的問題並不完全清楚,所以我打算在這裏做一些假設。

如果你只是想在一家商店值發生了變化,你可以使用一個觀察者觀看直接鏈接到商店吸氣劑計算性能的應用就會知道:

所以,你會設置一個觀察者對像這樣的:

computed: { 
    doneTodosCount() { 
    return this.$store.getters.doneTodosCount 
    } 
} 

watch:{ 
    doneTodosCount(value) { 
     console.log(`My store value for 'doneTodosCount' changed to ${value}`); 
    } 
} 

如果你希望你的承諾表現不同取決於你的foo屬性的當前值設定爲一定值,那麼你可以簡單地在你提交功能檢查這個。

讓我知道你是否還有其他問題。

+0

這不適合我,出於某種原因 – hidar

+0

任何控制檯錯誤? –

+0

我認爲問題在於計算和監視屬性不在相同的.vue文件中。我認爲這可能工作,如果他們在同一個文件 – hidar