9

我按照本教程使用 TypeScript 设置了一个带有模块的 Vuex 商店。

到目前为止，我有：

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,
};

商店.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'，这是有道理的，因为它没有定义，但它不应该在模块下查看，还是我没有正确定义模块？

4

4 回答 4

0

我建议做一个双重演员。一对一，回到你真正想要的。请记住，在下面的最后一个 router.ts 文件中，“store”是 Store 的一个实例，而其他两个导入只是类型。

为简洁起见，我省略了命名空间、状态、getter、动作、突变代码。它们只是对象结构

商店/myModule/types.ts：

export default interface State {
    testValue
}

存储/myModule/index.ts：

import RootState from '../types'

const module: Module<State, RootState> = {
    namespaced,
    state,
    getters,
    actions,
    mutations,
}

export default module

商店/types.ts：

interface RootState {
  myOtherTestValue: string
}

export default RootState
export { RootState }

存储/索引.ts：

import RootState from './types'
import myModule from './myModule'

export const cmStore: StoreOptions<RootState> = {
    actions,
    mutations,
    state,
    modules: {
        myModule,
    },
    plugins,

}

export default new Vuex.Store<RootState>(cmStore)

在 router.ts 中：

import store from './store'
import RootState from './store/types'
import MyModuleState from './store/myModule/types'

// to get what you want typed how you want:
const myState = ((store.state as any).myModule as MyModuleState)

console.log(myState.testValue)
于 2021-11-23T03:04:04.120 回答
0

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
于 2019-02-27T11:44:33.973 回答
0

这是一个具有依赖关系的工作解决方案"vuex": "^4.0.2"，"vue-router": "^4.0.10"并且"vue": "^3.1.4".

store将导入router文件以访问模块中的状态：

import store from "@/store/store";

在我的情况下，模块名称是authModule并且我访问存储 jwt的stateof ：token

let loggedIn = store.state.authModule.token;
于 2021-09-03T07:32:04.107 回答
-1

编辑：似乎直接访问状态是这里的问题。线

const isAuthed = store.state.UserProfile.authed;

我相信这是因为它是命名空间的。解决方案是创建一个吸气剂。

const getters: GetterTree<ProfileState, RootState> = {

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

};

然后你可以像访问它

store.getters['UserProfile/user']

另外，请考虑使用 getter 访问您的状态数据。请参阅Getter以供参考。

于 2018-10-19T10:57:44.703 回答