web-dev-qa-db-ja.com

Vuexアクションからvueルーターを使用してナビゲートする方法

Vue 2.xおよびVuex 2.xでWebアプリを作成しています。 http呼び出しを介してリモートロケーションからいくつかの情報を取得しています。その呼び出しが失敗した場合は、他のページにリダイレクトする必要があります。

GET_PETS: (state) => {
  return $http.get('pets/').then((response)=>{
      state.commit('SET_PETS', response.data)
    })
  },
  error => {this.$router.Push({path:"/"}) }
  )
}

しかし、this.$router.Push({path:"/"})は次のエラーを表示します。

Uncaught（約束）TypeError：未定義のプロパティ「プッシュ」を読み取ることができません

どうすればこれを達成できますか。

シミュレートされたJsFiddle： here

javascriptvue.jsvuex
40
Saurabh

import router from './router'

router.Pushを使用します

そのようなシンプル。

99
M U

ルーターをアプリに挿入していないように見えるため、「未定義」になります

Vue-routerの以前のバージョンでは、次のようになりました：Vue.use(VueRouter)、2.0では、以下のようにアプリにルーターを挿入できます。

const routes = [
  { path: '/foo', component: Foo },
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router // inject the router
}).$mount('#app')

これにより、アプリ全体でthis.$routerとして利用できるようになります。

関連する質問に答えた後： Vuex状態からVueルーターを使用する方法は？ Vuexはthis.$routerでルーターインスタンスを受信しないようです。したがって、ルータインスタンスへのアクセスを提供するために2つの方法が提案されました。

1つ目はより直接的で、インスタンスに対してグローバルなwebpackを設定することを伴います。

2つ目は、Promiseをvuexアクションで使用して、コンポーネントがPromiseの解決/拒否のアクションに従ってルーターインスタンスへの参照を利用できるようにすることです。

8
GuyC

この例が役立ちます。

main.js

import Vue from "vue";
import VueRouter from "vue-router";

...

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'hash',
    base: "./",
    routes: [
        { path: "/", component: welcome},
        { path: "/welcome", component: welcome},

    ]
})

actions.js

import {router} from "../main.js"

export const someAction = ({commit}) => {

    router.Push("/welcome");
}
7
bocai

アプリの場所の状態をストア内の他のアプリの状態から分離し、ルーターとストアの両方を管理する必要がないため、場所の状態を管理するVuexモジュールを作成しましたinsideストア。

これで、他の状態変更と同様に、アクションをディスパッチすることでナビゲートできます。

dispatch("router/Push", {path: "/error"})

これには、アニメーション化されたページの遷移などを簡単に処理できるという追加の利点があります。

独自のrouterモジュールをロールバックするのは難しくありませんが、次のようにすることもできます。

https://github.com/geekytime/vuex-router

5
Chris Jaynes

main.js（すべてのモジュールを「インストール」してVueインスタンスを作成するもの、つまりsrc/main.js）：

const vm = new Vue({
  el: '#app',
  router,
  store,
  apolloProvider,
  components: { App },
  template: '<App/>'
})

export { vm }

これは私の例ですが、ここで最も重要なのはconst vmとrouterです

storeで：

import { vm } from '@/main'

yourMutation (state, someRouteName) {
  vm.$router.Push({name: someRouteName})
}

追伸import { vm } from '@/main'を使用すると、vm.$rootの一部のコンポーネントに必要なbootstrap-vueなど、Vuexで必要なものにアクセスできます。

P.P.S.すべてが読み込まれたときにvmを使用できるようです。つまり、mounted()がvmの前に来る/発生するため、someMutationをmounted()の内部で呼び出す場合、someMutationの内部ではvmを使用できません。

2
TitanFighter