VueJs: нельзя использовать router.push - PullRequest
Новая
       7

VueJs: нельзя использовать router.push

0 голосов
/ 26 июня 2019

Итак, я хочу vue router.push на моем store.js, но я продолжаю получать ошибку Cannot read property 'push' of undefined

Я пытался импортировать Vue-маршрутизатор в мой store.js, но все еще тщетно

вот мой app.js: 

import Vue from 'vue'
import VueRouter from 'vue-router'

//Import and install the VueRouter plugin with Vue.use()
Vue.use(VueRouter)

import App from './views/App'
import Home from './views/Home'
import Login from './views/Login.vue'
import Register from './views/Register.vue'

const router = new VueRouter({
    mode: 'history',
    routes: [{
            path: '/',
            name: 'home',
            component: Home,
            meta: { requiresAuth: true }
        },
        {
            path: '/login',
            name: 'login',
            component: Login
        },
        {
            path: '/register',
            name: 'register',
            component: Register
        },
    ],
});



const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

и вот мой store.js: 

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        accessToken: null,
        loggingIn: false,
        loginError: null
    },

    mutations: {
        loginStart: state => state.loggingIn = true,
        loginStop: (state, errorMessage) => {
            state.loggingIn = false;
            state.loginError = errorMessage;
        },
        updateAccessToken: (state, accessToken) => {
            state.accessToken = accessToken;
        },
        logout: (state) => {
            state.accessToken = null;
        }
    },

    actions: {
        doLogin({ commit }, loginData) {
            commit('loginStart');
            console.log(loginData)

            axios.post('http://localhost:8000/api/login', loginData)
                .then(response => {
                    console.log(response)
                    let accessToken = response.data.jwt;
                    document.cookie = 'jwt_access_token=' + accessToken;
                    commit('updateAccessToken', accessToken);

                    ///this caused the error
                    this.$router.push({ path: '/' })
                })
                .catch(error => {
                    // commit('loginStop', error.response.data.error);
                    console.log(error)
                    commit('updateAccessToken', null);
                    console.log(error.response);
                })
        }
    }
})

Как вы можете видеть, после того, как я вызвал функцию doLogin () и использовал axios, он остановился на строке this. $ Router.push ({path: '/'}), что привело к ошибке.

1 Ответ

1 голос
/ 26 июня 2019

Вам нужно сделать router.js файл 

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  ...
})

export default router

В app.js замените импорт vue-router на новый router.js и удалите Vue.use(Router).

В магазине this не является экземпляром Vue. Импортируйте router.js в ваш store.js; 

import router from './router'

Тогда вы можете получить к нему доступ вот так; 

router.push({ path: '/' })

Я также заметил, что вы не добавили хранилище в экземпляр Vue. Импорт и добавление app.js. 

import store from './store'

...

const app = new Vue({
    el: '#app',
    components: { App },
    router,
    store //<<<<<<<<
});
...