Доступ Vue 3 к экземплярам, ​​предоставленным на уровне приложения, из vue-router

Я хочу написать сложную логику защиты в vue-router в Vue 3, чтобы защитить входящие некоторые маршруты в соответствии с хранилищем и другими моими предоставленными модулями. Например, я хочу проверить, присутствует ли информация профиля пользователя или нет:

router.afterEach((to, from) => {
    console.log('store: ', useStore());
    const puex = usePuex();
    puex.isReady().then(() => {
        const me = puex.me.compute();
        watch(me, (...params) => console.log('router: ', ...params));
    });
});

В приведенном выше коде useStore и usePuex пытаются внедрить экземпляры store и puex из приложения Vue, которые предоставляются при использовании в начальной загрузке main.js. Но обе используют функции, возвращающие undefined, и я предполагаю, что инъекция в этой области ищет другое место, где экземпляры, предоставленные на уровне приложения, не существуют.
Итак, как я могу ввести их в файл маршрутизатора, или, другими словами, как я могу Я получаю экземпляр store и puex, используя useStore и usePuex здесь?


vue.js vuejs3 vue-router vue-composition-api
person ConductedClever    schedule 27.04.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел способ в соответствии с этим вопросом но я до сих пор не знаю, лучшее ли это решение. Я могу экспортировать экземпляр приложения из файла main.js, а затем использовать вместо него app. $ Store и app. $ Puex. Хотя это работает, я все еще думаю о лучшем решении для внедрения экземпляра store и puex с использованием функций использования (inject).

person ConductedClever    schedule 27.04.2021