1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuex moduleのAction内でエラーを投げたら怒られた

Last updated at Posted at 2021-03-06

背景

vuex-module-decorators を使用し、Actionを宣言しました。

AuthStore.ts
@Action
public async addUser(params: loginParams) {
  // API呼び出し
  await ApiService.addUser(params.email, params.password);

  // 以下省略
}

それを、APIからエラーが返るような呼び出し方をすると、
このようなエラーが出ました。

Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? 
That works only in dynamic modules. 
If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]

原因

vuex-module-decoratorでは、Action内で発生したオリジナルのエラーを投げることができる
rawError という設定が、デフォルトでfalseとなっています。

その為、Actions内でエラーを投げようとしても、
それが呼び出し元に届いていないということでした。

対処

ActionにrawErrorを設定します

@Action{( rawError: true })
public async addUser(params: loginParams) {
  // API呼び出し
  await ApiService.addUser(params.email, params.password);

  // 以下省略
}

もしくは、ファイルの頭で設定を行い、全体にrawErrorを設定してしまいます。

import { config } from 'vuex-module-decorators';

config.rawError = true;

参考

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?