별도의 모듈에서 namesleded 액션을 디스패치할 수 없음: [vuex] 알 수 없는 액션 유형

별도의 모듈에서 namesleded 액션을 디스패치할 수 없음: [vuex] 알 수 없는 액션 유형

두 개의 모듈이 있습니다.activities그리고.alerts이 경우,activity추가된 경우 이름 지정 액션과 함께 경보를 발송합니다.alerts/SHOW.

이것은 컴포넌트에서 직접 액션을 호출했을 때 동작합니다(커맨드를 사용하여).createNamespacedHelpersVuex에서 네임스페이스 사용alerts).

그러나 다른 네임 슬롯 모듈에서 액션을 디스패치하면 다음 오류 메시지가 나타납니다.

[vuex] unknown action type: SHOW

제가 뭘 잘못했는지 모르겠어요.

전화하겠습니다.ADD다른 사람과 함께 행동하다createNamespacedHelpers를 위해activities네임스페이스.저도 사용하고 있습니다.{ root: true }옵션(Vuex 모듈 매뉴얼에 기재되어 있습니다.

[ Add Activity Button ]를 선택합니다.표시하다

<template>
  <button @click="addActivity(activity)"
          type="button"
          :disabled="activityCount >= maxActivities"
          class="btn btn-secondary">{{ activity.name }}
  </button>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { ADD } from "@/store/modules/activities";

const { mapActions, mapGetters, mapState } = createNamespacedHelpers(
  "activities"
);

export default {
  methods: {
    ...mapActions({
      addActivity: ADD
    })
  },
  computed: {
    ...mapState(["maxActivities"]),
    ...mapGetters(["activityCount"])
  },
  props: {
    activity: {
      type: Object,
      required: true
    }
  }
};
</script>

활동.js

import uuid from "uuid/v4";
import { SHOW as SHOW_ALERT } from "@/store/modules/alerts";

export const ADD = "ADD";
export const RESET = "RESET";
export const MAX_ACTIVITIES = 15;

const state = {
  items: [
    { id: 1, name: "A" },
    { id: 2, name: "B" },
    { id: 3, name: "C" },
    { id: 4, name: "D" },
    { id: 5, name: "E" },
    { id: 6, name: "F" }
  ],
  activities: [],
  maxActivities: MAX_ACTIVITIES
};

const getters = {
  activityCount(state) {
    return state.activities.length;
  }
};

const mutations = {
  [ADD](state, activity) {
    state.activities = [...state.activities, { ...activity, id: uuid() }];
  },
  [RESET](state) {
    state.activities = [];
  }
};

const actions = {
  [ADD]({ dispatch, commit, getters }, activity) {
    if (getters.activityCount >= MAX_ACTIVITIES) {
      return null;
    }
    if (getters.activityCount > 1) {
      dispatch(SHOW_ALERT, null, { root: true }); // This is the problematic line.
    }
    commit(ADD, activity);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

alerts.syslog

export const SHOW = "SHOW";

const state = {
  show: false
};

const mutations = {
  [SHOW](state) {
    state.show = true;
  }
};

const actions = {
  [SHOW]({ commit }) {
    commit(SHOW);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

store.displaces를 설정합니다.

import Vue from "vue";
import Vuex from "vuex";
import activities from "./modules/activities";
import alerts from "./modules/alerts";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    activities,
    alerts
  }
});

디스패치 시 액션 이름 공간을 지정해야 합니다.

dispatch('alerts/' + SHOW_ALERT, null, { root: true });

템플릿 리터럴을 사용하는 방법은 다음과 같습니다.

dispatch(`alerts/${SHOW_ALERT}`, null, { root: true });

이것은 컴포넌트에서 모듈스토어의 액션을 디스패치하는 경우입니다.

this.$store.dispatch("alerts/SHOW", data);

언급URL : https://stackoverflow.com/questions/49972028/cannot-dispatch-namespaced-action-from-a-separate-module-vuex-unknown-action