尝试从 vuejs 组件调度操作时，vuex 未知操作类型

Posted 2023-02-23

【中文标题】尝试从 vuejs 组件调度操作时，vuex 未知操作类型

【英文标题】：vuex unknown action type when attempting to dispatch action from vuejs component

【发布时间】：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)，可能值得删除其中一个

哦，是的，不错，但没有什么不同。

【参考方案1】：

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

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

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