我在另一个项目中使用 laravel、vue 和 vuex,代码几乎相同,并且运行良好。我正在尝试将我在那里所做的事情适应这个项目,使用该代码作为样板,但我不断收到错误:
[vuex] unknown action type: panels/GET_PANEL
我在商店目录中有一个index.js,然后导入命名空间的商店模块,以保持整洁:
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 的初始状态,然后得到:安装 Hook 中的错误:“ReferenceError:面板未定义。我尝试使用另一个模块存储创建另一个非常基本的组件,但没有成功那里也有。我检查了我的 vuex 版本,最新的 3.1.0。似乎是 app.js 或商店中的某些内容,因为问题在多个模块中仍然存在。
最佳答案
一旦您拥有命名空间模块,请使用以下映射:
...mapActions("panels", ["GET_PANEL"])
其中第一个参数是模块的命名空间,第二个参数是要映射的操作数组。
关于vue.js - 尝试从 vuejs 组件分派(dispatch)操作时,vuex 未知操作类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54223967/