te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Cannot dispatch namespaced action from a separate module: [vuex] unknown action type - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Cannot dispatch namespaced action from a separate module: [vuex] unknown action type - Stack Overflow

    javascript - Cannot dispatch namespaced action from a separate module: [vuex] unknown action type - Stack Overflow

    programmeradmin4浏览0评论

    I have two modules, activities and alerts. When an activity is added, I want to dispatch an alert with the namespaced action alerts/SHOW.

    This works when I call the action directly from a ponent (using the createNamespacedHelpers from Vuex, with a namespace of alerts).

    But when I dispatch the action from another namespaced module, I get the following error message: 

    [vuex] unknown action type: SHOW

    I'm not sure what I've done incorrectly.

    I am calling the ADD action with another createNamespacedHelpers for the activities namespace. I'm also using the { root: true } option, indicated 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
    })
  },
  puted: {
    ...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, mit, getters }, activity) {
    if (getters.activityCount >= MAX_ACTIVITIES) {
      return null;
    }
    if (getters.activityCount > 1) {
      dispatch(SHOW_ALERT, null, { root: true }); // This is the problematic line.
    }
    mit(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]({ mit }) {
    mit(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
  }
});

    I have two modules, activities and alerts. When an activity is added, I want to dispatch an alert with the namespaced action alerts/SHOW.

    This works when I call the action directly from a ponent (using the createNamespacedHelpers from Vuex, with a namespace of alerts).

    But when I dispatch the action from another namespaced module, I get the following error message: 

    [vuex] unknown action type: SHOW

    I'm not sure what I've done incorrectly.

    I am calling the ADD action with another createNamespacedHelpers for the activities namespace. I'm also using the { root: true } option, indicated 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
    })
  },
  puted: {
    ...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, mit, getters }, activity) {
    if (getters.activityCount >= MAX_ACTIVITIES) {
      return null;
    }
    if (getters.activityCount > 1) {
      dispatch(SHOW_ALERT, null, { root: true }); // This is the problematic line.
    }
    mit(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]({ mit }) {
    mit(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
  }
});
    • javascript
    • vue.js
    • vuex
    Share Improve this question edited Apr 23, 2018 at 13:55 acdcjunior 136k37 gold badges338 silver badges310 bronze badges asked Apr 23, 2018 at 0:40 andrewhlandrewhl 1,0121 gold badge12 silver badges31 bronze badges
    Add a ment  | 

    2 Answers 2

    Reset to default 14

    You have to namespace the action when dispatching:

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

    Using template literals should be:

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

    This is in case you want to dispatch an action of a module store from a ponent

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

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论