Доступ к состоянию модуля хранилища Vuex внутри router.ts

Я выполнил этот учебник, чтобы настроить хранилище Vuex с модулями, использующими TypeScript.

Пока у меня есть:

vuex / types.ts:

export interface RootState {
    version: string;
}

vuex / user-profile.ts:

import { ActionTree, Module, MutationTree } from 'vuex';
import { RootState } from './types';

interface User {
    firstName: string;
    uid: string;
}

interface ProfileState {
    user?: User;
    authed: boolean;
}

const state: ProfileState = {
    user: undefined,
    authed: false,
};

const namespaced: boolean = true;

export const UserProfile: Module<ProfileState, RootState> = {
    namespaced,
    state,
};

store.ts:

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { UserProfile } from '@/vuex/user-profile';
import { RootState } from '@/vuex/types';

Vue.use(Vuex);

const store: StoreOptions<RootState> = {
  state: {
      version: '1.0.0',
  },
  modules: {
      UserProfile,
  },
};

export default new Vuex.Store<RootState>(store);

В моем router.ts я хочу получить доступ к authed состоянию магазина следующим образом:

import store from './store';
//...other imports...

const router = new Router({
//... route definitions...
});

router.beforeEach((to, from, next) => {
  const isAuthed = store.state.UserProfile.authed;
  if (to.name !== 'login' && !isAuthed) {
    next({ name: 'login' });
  } else {
    next();
  }
});

Код работает (приложение правильно перенаправляет), ОДНАКО компилятор выдает ошибки, говоря Property 'UserProfile' does not exist on type 'RootState', что имеет смысл, поскольку он не определен, но не должен ли он также заглядывать под модули, или я неправильно определил модуль?


typescript vue.js vuex vue-router vuex-modules
person Andre12    schedule 17.10.2018    source источник

Ответы (2)


arrow_upward
-1
arrow_downward

РЕДАКТИРОВАТЬ: Кажется, проблема здесь в прямом доступе к состоянию. Линия

const isAuthed = store.state.UserProfile.authed;

Я считаю, что это происходит потому, что это пространство имен. Решением было бы создать геттер.

const getters: GetterTree<ProfileState, RootState> = {

    user(state): User {
        return state.user
    }

};

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

store.getters['UserProfile/user']

Кроме того, рассмотрите возможность использования геттеров для доступа к данным вашего состояния. Для справки см. Getters.

person Danijel    schedule 19.10.2018
comment
У меня в модуле есть RootState: export const UserProfile: Module<ProfileState, RootState> - person Andre12; 19.10.2018
comment
Да, но вы добавили GetterTree, MutationTree и т. Д.? Я считаю, что их также следует добавлять и экспортировать, даже если они пусты. - person Danijel; 19.10.2018
comment
Я добавил весь код (геттеры, мутации, действия и т. Д.) С той же проблемой - person Andre12; 25.10.2018
comment
Я отредактировал ответ. Не могли бы вы также попробовать в конце экспортировать пустые мутации, действия и модули из основного магазина? Я смутно помню, как наткнулся на эту проблему и решил именно так вначале. - person Danijel; 25.10.2018
comment
я сделал, та же проблема сохраняется - person Andre12; 26.10.2018
comment
Это не то, как предполагается использовать геттеры, ссылки на магазины уже являются реактивными. - person Etheryte; 19.03.2019

arrow_upward

arrow_downward

person    schedule
comment
У 1 такая же проблема. 2 и 3 работают, но преобразование их как any отрицает назначение машинописного текста. проголосовали за. - person Andre12; 04.04.2019