Доступ к Vuex State из VueRouter - PullRequest
       3

Доступ к Vuex State из VueRouter

0 голосов
/ 15 апреля 2020

Я пытаюсь обернуться вокруг штурмана для vue. js. Я пытался следовать примеру, но думаю, что мне не удается подключить мой штат (store. js) к моему маршрутизатору (маршруты. js). В моем компоненте Login. vue я пытаюсь перевести sh на новый маршрут после того, как loadUser отправил в State, и впоследствии isLoggedIn обновится до true. В компонентах vue, которые я использую mapState, мне нужно делать то же самое здесь, в маршрутах. js. Или, может быть, есть лучший способ сделать это. Чтобы получить полную картину, я использую vue интерфейс и laravel интерфейс с Sanctum.

Извлечение из маршрутов. js

const routes = [
    {
        path: '/',
        component: Login,
        name: 'login'
    },
    {
        path: '/dashboard',
        component: Dashboard,
        name: 'dashboard',
        meta: { requiresAuth: true }
    },
]

const router = new VueRouter({
    mode: 'history',
    routes // short for `routes: routes`
});

router.beforeEach((to, from, next) => {
    // if (to.matched.some(record => record.meta.requiresAuth)) {
    if (to.meta.requiresAuth) {
        if (store.state.isLoggedIn) {
            next();
        } else {
            next({
                name: 'home'
            });
        }
    } else {
        next();
    }
});

export default router;

Извлечение из магазина. js

export default {
    state : {
        isLoggedIn: false,
    }
}

Выписка из логина. vue

methods : {
        async login() {
            this.loading = true;
            this.errors = null;

            try {
                await axios.get('/sanctum/csrf-cookie');
                await axios.post('/login', this.user);

                logIn();
                this.$store.dispatch('loadUser');
                this.$router.push({ name: 'logbook'});

            } catch (error) {
                this.errors = error.response && error.response.data.errors;
            }

            this.loading = false;
        }
    },

1 Ответ

2 голосов
/ 15 апреля 2020

Если вы хотите получить доступ / изменить Vuex в VueRouter, вы должны использовать команду router.app.store.state....

Например:

const routes = [
  { path: '/', component: Login, name: 'login' },
  { path: '/dashboard', component: Dashboard, name: 'dashboard', meta: { requiresAuth: true } },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

router.beforeEach((to, from, next) => {
  if (router.app.$store) {
    // Example to access the state
    console.log(router.app.$store.state.isLoggedIn);

    // Example to exec the mutation
    router.app.$store.commit('myMutation', 'myArgs');

    // Example to exec the action (ATTENTION IS ASYNC)
    router.app.$store.dispatch('myAction', 'myArgs');
  }

  if (to.meta.requiresAuth) {
    // ...
  } else {
    next();
  }
});

export default router;

Внимание: вы должны загрузить Vuex первым, чем VueRouter. Потому что, когда VueRouter загружается, Vuex должен быть готов. Вы можете изменить это в main.js:

import Vue from 'vue'
import App from './App.vue'
import store from './store' // FIRST IMPORT
import router from './router' // SECOND IMPORT

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Другое дело, я предпочитаю контролировать вход в куки, потому что пользователь может открывать много вкладок. Это мое мнение, вы можете делать то, что предпочитаете.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...