Question

我正在使用Vue，Ts，Vuex和Inversify建立一个新项目。由于我是Ts和DI的新手，所以我发现我不知道如何使用DI和TS正确编码我的Vuex模块。我正在从没有TS（只是Vue + Vuex）的项目中重构它。

我已经尝试过VuexModuleDecorators，但是我的应用程序将非常庞大，因此在同一文件中（在Vuex模块内部）混合动作和突变是有点麻烦且难以维护的。另外，我尝试使用Vuex utils代码，例如ActionTree / MutationTree，但我不知道DI（使用Inversify）在哪里起作用（或者这是否正确）。

基本代码（不带TS的Vuex）：

export const login = async ({ commit }, { username, password }) => {
  const encryptedLogin = encryptLogin(username.toLowerCase(), password);

  const data = await UserService.User.login(encryptedLogin);

  if (data) {
    commit(userTypes.SET_TOKEN, data.access_token);
    commit(userTypes.SET_LOGGED_IN, {
      username,
      EncryptedUsername: encryptedLogin.Username,
    });
  }
};

Vuex实用程序（不含TS）：

export const actions: ActionTree<UserState, RootState> = {
  async login({ commit }, { username, password }) {
    const encryptedLogin = encryptLogin(username.toLowerCase(), password);

    const data = await UserService.User.login(encryptedLogin);

    if (data) {
      commit(userTypes.SET_TOKEN, data.access_token);
      commit(userTypes.SET_LOGGED_IN, {
        username,
        EncryptedUsername: encryptedLogin.Username,
      });
    }
  },
};

我想用TS和DI（使用Inversify ...）进行翻译，我的意思是，我想注入“ ActionService”接口...这是正确的吗？我该如何实现？

Vuex的大型应用程序DI

0 个答案: