javascript - component - vue-headful




Как перемещаться с помощью vue router из Vuex-действий (4)

В 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})
}

PS Используя import { vm } from '@/main' мы можем получить доступ ко всему, что нужно в Vuex , например vm.$root Vuex , который необходим некоторым компонентам bootstrap-vue .

PPS Кажется, мы можем использовать vm когда все загружено. Другими словами, мы не можем использовать vm внутри someMutation в случае, если мы вызываем someMutation внутри someMutation mounted() , потому что someMutation mounted() приходит / возникает до создания vm .

Я создаю веб-приложение с Vue 2.x и Vuex 2.x. Я извлекаю некоторую информацию из удаленного места через 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:"/"}) дает мне следующую ошибку.

Неподготовлено (в обещании) TypeError: невозможно прочитать свойство «push» неопределенного

Как это можно достичь.

Имитированный JsFiddle: here


Мне не нравилось сохранять состояние местоположения моего приложения отдельно от остальной части моего состояния приложения в Магазине, а также управлять как маршрутизатором, так и хранилищем, поэтому я создал модуль Vuex, который управляет состоянием местоположения в Магазине.

Теперь я могу перемещаться, отправляя действия, как и любое другое изменение состояния:

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

Это имеет дополнительное преимущество, позволяющее упростить обработку таких анимированных переходов страниц.

Нетрудно свернуть собственный модуль router , но вы также можете попробовать мои, если хотите:

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


Этот пример может помочь вам.

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");
} 

import router from './router'

и используйте router.push

Просто так.





vuex