如何从 javascript/typescript 模块文件（导入/导出）访问 Vuex 存储？

Question

我有一个

vue

申请。

如何从 javascript/typescript 模块文件（导入/导出）访问商店？

例如，我创建了导出状态、操作、突变的身份验证模块。

export const auth = {
  namespaced: true,
  state,
  actions,
  mutations,
  getters,
};

在我的应用程序中，我将模块导入到我的商店：

Vue.use(Vuex);

export const store = new Vuex.Store({

  modules: {
    auth,
  }
});

现在，我想为我的 http 调用创建拦截器（在我的身份验证模块内），以从商店添加令牌。

Vue.http.interceptors.push((request: any) => {
    // ---> store.state.token???
    // request.headers.set('Authorization', 'Bearer TOKEN');
  });

但是我怎样才能在不依赖我的应用程序的情况下访问商店的状态呢？

import {store} from './store'

但可以从

vue

或

vuex

模块导入商店实例。

Answer 1

您可以使用插件来做到这一点。

1. 当您使用Plugin时，您将获得store实例。
2. 订阅实例并获取状态，从状态中提取令牌并将其保存到本地变量。
3. 在拦截器中读取此模块全局变量。

这是我为您构建的解决方案：

StoreTokenInterceptorPlugin.ts

import Vue from 'vue';
import VueResource from 'vue-resource';
import { get } from 'lodash';

Vue.use(VueResource);

export const StoreTokenInterceptorPlugin = (store: any) => {
  let token: string | null = null;

  (Vue.http.interceptors as any).push((request: any) => {
    if (token && !request.headers.get('Authorization')) {
      request.headers.set('Authorization', `Bearer ${token}`);
    }
  });

  store.subscribe((mutation: any, state: any) => {
    token = get(state, 'auth.token') || null;
  });
};

在您的应用商店中：

import Vue from 'vue';
import Vuex from 'vuex';

import { auth, StoreTokenInterceptorPlugin } from '@modules/auth';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state,

  modules: {
    auth,
  } as any,
  ....
  plugins: [StoreTokenInterceptorPlugin],
});

Answer 2

在打字稿模块中只需导入商店

import { store } from "../../modules/store";

然后从异步函数中调用它，如下所示（这是一个类方法示例）

public async setUserProfile(): Promise<void> {
  const userProfile: IUserProfile = createUserProfile();
  await store.getters['user/getUserProfile'] 
}

存储操作看起来像

export const user: Module<IUserProfile, IRootState> = {
  namespaced: true,
  state: {
    avatar: null,
    connectionId: null,
    emailAddress: null,
    userNickName: null
  } as IUserProfile,
  getters: {
    getUserProfile(state): IUser {
      return state;
    }
  }
}