vuex-module-decorator 의 @Action({ rawError: true }) 란 ?

저게 의미하는 바가 무엇인지 몰라서 직접 vuex-module-decorator를 뒤져보았다.

 

node_modules/vuex-module-decorator/dist/cjs/index.js

function actionDecoratorFactory(params) {
    var _a = params || {}, _b = _a.commit, commit = _b === void 0 ? undefined : _b, _c = _a.rawError, rawError = _c === void 0 ? !!config.rawError : _c, _d = _a.root, root = _d === void 0 ? false : _d;
    return function (target, key, descriptor) {
        var module = target.constructor;
        if (!module.hasOwnProperty('actions')) {
            module.actions = Object.assign({}, module.actions);
        }
        var actionFunction = descriptor.value;
        var action = function (context, payload) {
            return __awaiter(this, void 0, void 0, function () {
                var actionPayload, moduleName, moduleAccessor, thisObj, e_1;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            _a.trys.push([0, 5, , 6]);
                            actionPayload = null;
                            if (!module._genStatic) return [3 /*break*/, 2];
                            moduleName = getModuleName(module);
                            moduleAccessor = context.rootGetters[moduleName]
                                ? context.rootGetters[moduleName]
                                : getModule(module);
                            moduleAccessor.context = context;
                            return [4 /*yield*/, actionFunction.call(moduleAccessor, payload)];
                        case 1:
                            actionPayload = _a.sent();
                            return [3 /*break*/, 4];
                        case 2:
                            thisObj = { context: context };
                            addPropertiesToObject(thisObj, context.state);
                            addPropertiesToObject(thisObj, context.getters);
                            return [4 /*yield*/, actionFunction.call(thisObj, payload)];
                        case 3:
                            actionPayload = _a.sent();
                            _a.label = 4;
                        case 4:
                            if (commit) {
                                context.commit(commit, actionPayload);
                            }
                            return [2 /*return*/, actionPayload];
                        case 5:
                            e_1 = _a.sent();
                            throw rawError
                                ? e_1
                                : new Error('ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access ' +
                                    'this.someMutation() or this.someGetter inside an @Action? \n' +
                                    'That works only in dynamic modules. \n' +
                                    'If not dynamic use this.context.commit("mutationName", payload) ' +
                                    'and this.context.getters["getterName"]' +
                                    '\n' +
                                    new Error("Could not perform action " + key.toString()).stack +
                                    '\n' +
                                    e_1.stack);
                        case 6: return [2 /*return*/];
                    }
                });
            });
        };
        module.actions[key] = root ? { root: root, handler: action } : action;
    };
}

 

코드는 뭐 true일때 우리가 정의한 에러를 날려주고 아니면 기본 정의에러를 날린다는 의미이다.

@Action
async sampleAction() {
  const sampleData = await fetchSampleData()
    .catch((error) => {
      throw error
    })
}

default 가 false이기 때문에 생략할 시,catch의 error가 포착이 안될 수 있다.

 

rawError = true 를 하는게 디버깅하기 더 쉬울꺼 같으니 해주자.