时间戳

首页 > 解决方案 > 在 router.js 中访问 Vuex 存储时出现异步等待问题

vue.js - 在 router.js 中访问 Vuex 存储时出现异步等待问题

问题描述

我正在尝试访问路由器文件中的 Vuex 存储。我需要根据 store 的 data.length 定义路由。例如，如果 store.data 为空，我只需要 Company List 路由。如果没有，我只需要登录路线。实际上数据不是空数组，但它总是记录为空数组，我怎样才能在没有这个问题的情况下获取商店的数据（异步/等待）？这是我的代码。

import Vue from 'vue';
import Router from 'vue-router';
import store from '@/store';

Vue.use(Router);

let data = [];
async function getData() {
  data = await store.dispatch('auth/fetchCompanyList');
}

getData();

console.log('data', data);
//data is always empty array.

let routes = [];

if (data.length === 0) {
  routes = [
    {
      path: '/company-list',
      name: 'CompanyList',
      component: () => import('../pages/admin/company/List.vue'),
    },
  ];
} else {
  routes = [
    {
      path: '/signin',
      name: 'Signin',
      component: () => import('../pages/signin.vue'),
    },
  ];
}

console.log('Route: ', routes);

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  // base: process.env.BASE_URL + '/ui/',
  routes,
});

export default router;

标签： vue.jsasync-awaitvuex

解决方案

当您记录它时，数据将为空，因为它没有从您的存储方法中收到答案。你可以使用.then()来访问 promise 的值。然后，您可以使用可用的功能自由地将更多路由添加到您的路由器addRoutes()。

一个实现可能如下所示：

import Vue from 'vue';
import Router from 'vue-router';
import store from '@/store';

Vue.use(Router);

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    // base: process.env.BASE_URL + '/ui/',
    routes: [],
});

const getData = async () => {
    data = await store.dispatch('auth/fetchCompanyList');
};
const handleData = (data) => {
    if (data.length === 0) {
        router.addRoutes([
            {
                path: '/company-list',
                name: 'CompanyList',
                component: () => import('../pages/admin/company/List.vue'),
            },
        ]);
    }else{
        router.addRoutes([
            {
                path: '/signin',
                name: 'Signin',
                component: () => import('../pages/signin.vue'),
            },
        ])
    }
};

getData().then(handleData);

export default router;

推荐阅读