2016-11-18 40 views
3

小提琴:here我能做從干將在Vuex派遣

我創建與Vue公司2 Vuex web應用程序。我有一個商店,我想從一個getter獲取狀態數據,我想要的是如果getter發現數據尚未填充,它調用dispatch並獲取數據。

以下是我Vuex店:

const state = { 
    pets: [] 
}; 

const mutations = { 
    SET_PETS (state, response) { 
    state.pets = response; 
    } 
}; 

const actions = { 
FETCH_PETS: (state) => { 
     setTimeout(function() { 
      state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi']) 
    }, 1000) 
} 
} 

const getters = { 
    pets(state){ 
    if(!state.pets.length){ 
     state.dispatch("FETCH_PETS") 
    } 
    return state.pets 
    } 
} 

const store = new Vuex.Store({ 
    state, 
    mutations, 
    actions, 
    getters 
}); 

但我得到以下錯誤:

Uncaught TypeError: state.dispatch is not a function(…)

我知道我能做到這一點,從Vue公司組成的beforeMount,但我有多個部件,其使用相同的Vuex存儲,所以我必須在其中一個組件中執行此操作,應該如何操作,以及它如何影響其他組件。因爲它們是通過商店

操作可以調用狀態,調度,提交,因爲它們是通過上下文的statecontext

回答

1

吸氣劑不能呼叫調度。

吸氣劑用於管理「派生狀態」。

如果改爲設立pets狀態在需要它的成分,那麼你只需調用FETCH_PETS從您的應用程序的根目錄,並刪除需要吸氣

+0

感謝回答,兩件事情:1。如果有多個組件使用寵物,在哪些組件應該被提取,什麼可以作爲中心位置來做到這一點? 2.同樣,這也不能通過計算來完成? – Saurabh

+0

1. vuex是您的中央商店,因此它們都可以通過計算屬性訪問它,例如'calculate:{pets(){return this。$ store.state.pets}}'將商店傳遞到您的應用的根目錄考慮到這一點。 2.您可以使用應用程序根目錄的掛載方法,但我不會使用計算屬性對vuex進行異步更新。相反,他們可以只看商店(如上所述),並在異步操作完成並且提交已通過狀態時更新其新的寵物數據。 – GuyC

+0

來闡明第1點。我會在你的應用程序根目錄或一個當第一次需要寵物對象時將被調用的組件中激發異步vuex dispatch()。沒有看到很難查明的應用程序結構,但我相信你會找到一個合理的位置。 – GuyC