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

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

0 голосов
/ 17 октября 2018

Я следовал этому руководству по настройке хранилища 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', что имеет смысл, так как он не определен, но не должен ли он смотреть и под модулями, или я не определил модуль правильно?

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

1 

     const isAuthed = store.state["UserProfile"].authed; // false

2 

    const state:any|State = store.state
    const isAuthed = state.UserProfile.authed; // false

3 

    const isAuthed = (<any|State>store.state).UserProfile.authed; // false
0 голосов
/ 19 октября 2018

РЕДАКТИРОВАТЬ: Кажется, что прямой доступ к государству является проблемой здесь.Строка 

const isAuthed = store.state.UserProfile.authed;

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

const getters: GetterTree<ProfileState, RootState> = {

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

};

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

store.getters['UserProfile/user']

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

...