【问题标题】:vuex unknown action type when attempting to dispatch action from vuejs component尝试从 vuejs 组件调度操作时,vuex 未知操作类型
【发布时间】:2019-06-10 22:44:00
【问题描述】:

我在另一个项目中使用 laravel、vue 和 vuex,代码几乎相同,而且效果很好。我正在尝试将我在那里所做的调整到这个项目,使用该代码作为样板,但我不断收到错误:

[vuex] unknown action type: panels/GET_PANEL

我在 store 目录中有一个 index.js,然后导入命名空间的 store 模块,以保持整洁:

import Vue from "vue";
import Vuex from "vuex";
var axios = require("axios");

import users from "./users";
import subscriptions from "./subscriptions";
import blocks from "./blocks";
import panels from "./panels";

Vue.use(Vuex);
export default new Vuex.Store({

  state: {
  },
  actions: {

  },
  mutations: {

  },
  modules: {
    users,
    subscriptions,
    blocks,
    panels
  }
})

panels.js:

 const state = {
    panel: []
  }

  const getters = {
  }
  const actions = {
    GET_PANEL : async ({ state, commit }, panel_id) => {
      let { data } = await axios.get('/api/panel/'+panel_id)
      commit('SET_PANEL', data)
    }
  }

  const mutations = {
    SET_PANEL (state, panel) {
      state.panel = panel
    }
  }

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

下面是我的 vue 组件的脚本部分:

<script>
import { mapState, mapActions } from "vuex";
export default {
  data () {
    return {
    }
  },
  mounted() {
    this.$store.dispatch('panels/GET_PANEL', 6)
  },
  computed: 
    mapState({
      panel: state => state.panels.panel
  }),
  methods: {
    ...mapActions([
      "panels/GET_PANEL"
    ])
  }
}
</script>

这是我的 app.js 中的相关代码:

import Vue from 'vue';
import Vuex from 'vuex'
import store from './store';
Vue.use(Vuex)

const app = new Vue({
  store: store,
}).$mount('#bsrwrap')

更新:: 我试图从 vuex 记录初始状态,我得到: 挂载钩子中的错误:“ReferenceError: 面板未定义。我尝试使用另一个模块存储创建另一个非常基本的组件,没有运气那里也是。我检查了我的最新版本 3.1.0。似乎是 app.js 或商店中的某些东西,因为问题在多个模块中仍然存在。

【问题讨论】:

  • 你打电话给Vue.use(Vuex),可能值得删除其中一个
  • 哦,是的,不错,但没有什么不同。

标签: vue.js vuejs2 components vuex vuex-modules


【解决方案1】:

一旦你有了命名空间的模块,使用下面的映射:

...mapActions("panels", ["GET_PANEL"])

第一个参数是模块的命名空间,第二个是要映射的操作数组。

【讨论】:

    猜你喜欢
    • 2021-11-28
    • 2021-07-21
    • 2018-10-02
    • 2019-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-23
    相关资源
    最近更新 更多