如何從Vuex狀態使用Vue路由器？

this.$router.push({ name: 'home', params: { id: this.searchText }});

要更改路線。我現在已經將一種方法轉移到我的Vuex操作中，當然this.$router不再有效。 Vue.router也不是。那麼，我該如何從Vuex狀態調用路由器方法？

2016-11-23 daninthemix

重複http://stackoverflow.com/questions/40736799/how-to-navigate-route-from-vuex-actions – Saurabh

我假設vuex-router-sync在這裏沒有幫助，因爲您需要路由器實例。

因此雖然這並不覺得理想的，你可以設置的實例作爲的WebPack內的全球性的，即

global.router = new VueRouter({ 
    routes 
}) 

const app = new Vue({ 
    router 
    ...

現在你應該能夠：router.push({ name: 'home', params: { id: 1234 }})從任何地方你的應用程序中

作爲一種替代方案，如果你不喜歡上述想法，你可以從你的行動中返回一個承諾。然後，如果行動成功完成，我認爲它會調用突變或什麼，你可以的承諾。但是，如果它失敗了，無論重定向需要什麼條件，你都會擊中你的承諾。

這種方式，您可以移動路由器重定向到，僅僅抓住了拒絕承諾並觸發VUE路由器推一個組成部分，即

# vuex 
actions: { 
    foo: ({ commit }, payload) => 
    new Promise((resolve, reject) => { 
     if (payload.title) { 
     commit('updateTitle', payload.title) 
     resolve() 
     } else { 
     reject() 
     } 
    }) 

# component 
methods: { 
    updateFoo() { 
    this.$store.dispatch('foo', {}) 
     .then(response => { // success }) 
     .catch(response => { 
     // fail 
     this.$router.push({ name: 'home', params: { id: 1234 }}) 
     })

來源

2016-11-23 15:52:46 GuyC

您的第一個建議的作品 - 謝謝。爲什麼將路由器連接到全局是一個壞主意？同樣，我需要對Vue-Resource進行全局訪問 - 出於某種原因導入Vue並使用Vue.http可以正常工作（但是最佳嗎？），無論我需要Vue-Resource。我是否應該將Vue-Resource也附加到全球？關於你的第二點，我會研究（我沒有太多的承諾） – daninthemix

我不確定這是一個壞主意，它只是感覺有點不對 - 像這應該是內置到** vuex -router同步**。我已經詳細闡述了第二個想法，以防萬一我真的很喜歡諾言！關於vue-resource的觀點，是的，這很好 - 'Vue.http'旨在以這種方式使用，不需要全球化。 – GuyC

我在使用Promise語法時遇到了問題 - 請介意再看一下嗎？ http://jsbin.com/webezelaki/edit?js – daninthemix

相信rootState.router會在你的行動上可用，假設你通過router作爲您的主Vue構造函數中的一個選項。

正如GuyC提到的那樣，我也認爲在解決之後，您可能會更好地從您的操作和路由中返回承諾。簡單來說：dispatch(YOUR_ACTION).then(router.push())。

來源

2016-11-24 04:12:27 Chris

是的，我最終採用了GuyC提到的Promise方法。你是如何學習/我們期望如何知道rootState的？沒有看到任何地方記錄。 – daninthemix

是的，它可能沒有給予它應該在文檔中的重點。這是在Vuex [actions]（https://vuex.vuejs.org/en/actions.html）文檔中提到的，否則僅在[modules]（https://vuex.vuejs.org/en/）中提及modules.html）文檔 - 它絕對不會跳出你的。 – Chris

缺省情況下，rootState中沒有'router'。如果使用vuex-router-sync，路由器實例基本上是不可變的，除了「路由」本身，它是狀態的一部分，所以手動注入也會過度。 –

如何從Vuex狀態使用Vue路由器？

回答

相關問題