web-dev-qa-db-ja.com

使用方法Vue Vuex状態のルーター？

私が使用しているコンポーネントでは、次のようになります。

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

ルートを変更します。これで、メソッドをVuexアクションに移動しました。もちろん、this.$routerは機能しなくなりました。また、Vue.router。では、Vuex状態からルーターメソッドを呼び出すにはどうすればよいですか？

vue.jsvue-routervuex
9
daninthemix

vuex-router-sync はルーターインスタンスが必要なので、ここでは役に立たないと思います。

したがって、これは理想的ではありませんが、インスタンスをwebpack内のグローバルとして設定できます。

_global.router = new VueRouter({
  routes
})

const app = new Vue({
  router
  ...
_

これで、次のことができるようになります。router.Push({ name: 'home', params: { id: 1234 }})アプリ内のどこからでも

別の方法として、上記のアイデアが気に入らない場合は、アクションからPromiseを返すことができます。次に、アクションが正常に完了すると、ミューテーションなどが呼び出され、Promiseをresolveできると思います。ただし、失敗してリダイレクトに必要な条件が満たされている場合は、rejectPromiseになります。

このようにして、ルーターのリダイレクトを、拒否されたPromiseをキャッチし、vue-routerPushを起動するコンポーネントに移動できます。

_# 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 }})
      })
_
13
GuyC

状況によっては、.goの代わりに.Pushを使用することになります。

申し訳ありませんが、理由の説明はありませんが、私の場合はうまくいきました。私のような将来のGoogle社員のためにこれを残します。

0
realtebo

メインのVueコンストラクターのオプションとしてrouterを渡したと仮定すると、_rootState.router_がアクションで使用可能になると思います。

GuyCが述べたように、私はまた、あなたの行動から約束を返し、それが解決した後にルーティングする方が良いかもしれないと思っていました。簡単に言うと、dispatch(YOUR_ACTION).then(router.Push())。

0
Chris
    state: {
        anyObj: {}, // Just filler
        _router: null // place holder for router ref
    },
    mutations: {
        /***
        * All stores that have this mutation will run it
        *
        *  You can call this in App mount, eg...

        *  mounted () {
        *    let vm = this
        *    vm.$store.commit('setRouter', vm.$router)
        *  }
        *
        setRouter (state, routerRef) {
            state._router = routerRef
        }
    },
    actions: {
        /***
        * You can then use the router like this
        * ---
        someAction ({ state }) {
            if (state._router) {
                state._router.Push('/somewhere_else')
            } else {
                console.log('You forgot to set the router silly')
            }
        }
    }
}
0
voidPointer