In my coding project, I am working with two different modules called activities and alerts. One of the requirements is that whenever an activity is added, I need to trigger an alert action with the namespaced identifier alerts/SHOW.
This functionality was successfully implemented when I directly called the action from a component, utilizing the createNamespacedHelpers method provided by Vuex with the namespace set to alerts.
However, I encountered an issue when I tried dispatching the action from another module within a different namespace. The error message thrown was:
[vuex] unknown action type: SHOWI am unsure about what could be causing this error.
To provide some context, I am invoking the ADD action using another instance of createNamespacedHelpers, this time for the activities namespace. Additionally, I have utilized the { root: true } option as specified in the Vuex module documentation.
AddActivityButton.vue
<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>
activities.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.js
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.js
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
}
});