vuejs 구성 요소에서 작업을 디스패치할 때 vuex 알 수 없는 작업 유형

vuejs 구성 요소에서 작업을 디스패치할 때 vuex 알 수 없는 작업 유형

라라벨, vue 및 vuex를 거의 동일한 코드의 다른 프로젝트에서 사용하고 있으며, 정상적으로 동작하고 있습니다.이 코드를 보일러 플레이트로 사용하여 작업한 내용을 이 프로젝트에 적용하려고 하는데 계속 오류가 발생합니다.

[vuex] unknown action type: panels/GET_PANEL

스토어 디렉토리에 index.js가 있으며, 네임 사이드 스토어 모듈을 Import하여 깔끔한 상태를 유지합니다.

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.disples:

 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>

다음은 제 앱의 관련 코드입니다.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: panel이 정의되지 않았습니다.다른 모듈 스토어를 사용하여 기본 컴포넌트를 하나 더 만들어 봤지만, 그것도 잘 되지 않았습니다.최신 버전인 vuex 3.1.0을 확인했습니다.여러 모듈에서 문제가 지속되고 있기 때문에 app.js 또는 스토어에 문제가 있는 것 같습니다.

모듈 네임슬레이징이 완료되면 다음 매핑을 사용합니다.

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

여기서 첫 번째 인수는 모듈의 네임스페이스이고 두 번째 인수는 매핑할 액션 배열입니다.

언급URL : https://stackoverflow.com/questions/54223967/vuex-unknown-action-type-when-attempting-to-dispatch-action-from-vuejs-component