Nuxt.js / Vuex - mapActions 도우미의 네임스페이스 모듈 사용, [vuex] 알 수 없는 작업 유형: FETCH_LABel

Nuxt.js / Vuex - mapActions 도우미의 네임스페이스 모듈 사용, [vuex] 알 수 없는 작업 유형: FETCH_LABel

다음을 사용하여 작업을 구성 요소에 매핑하려는 경우mapActionsvuex에서 온 도우미다음은 내 레이블.js vuex 모듈:

export const FETCH_LABELS = 'FETCH_LABELS'
export const FETCH_LABEL = 'FETCH_LABEL'

const state = () => ({
  labels: [
    { name: 'Mord Records', slug: 'mord', image: '/images/labels/mord.jpg'},
    { name: 'Subsist Records', slug: 'subsist', image: '/images/labels/subsist.jpg'},
    { name: 'Drumcode Records', slug: 'drumcode', image: '/images/labels/drumcode.png'},
  ],
  label: {} // null
})

const mutations = {
  FETCH_LABEL: (state, { label }) => {
    state.label = label
  },
}

const actions = {
  fetchLabel({commit}, slug) {
    
    let label = state.labels.filter((slug, index) => {
      return slug == state.labels[index]
    })

    commit(FETCH_LABEL, { label })
  },
}

const getters = {
  labels: state => {
    return state.labels
  },

  label: (state, slug) => {
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

여기 나의 구성 요소인 슬러그가 있다.petchLabel 작업을 매핑할 vue 페이지:

<template>
  <div class="container">

        <div class="section">
            <div class="box">
                <h1>{{ $route.params.slug }}</h1>
            </div>
         
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {
      title: this.$route.params.slug
    };
  },
  computed: {
    // Research
    // labels() {
    //   return this.$store
    // }

    ...mapGetters({
      labels: "modules/labels/labels"
    })
  },
  components: {},
  methods: {
    ...mapActions({
      fetchLabel: 'FETCH_LABEL' // map `this.add()` to `this.$store.dispatch('increment')`
    })
  },
  created() {
    console.log('created')
    this.fetchLabel(this.$route.params.slug)
  },
  head() {
    return {
      title: this.title
    }
  },
  layout: "app",
}
</script>

<style>
</style>

그러나 내부는created()라이프사이클 후크this.fetchLabel(this.$route.params.slug)콘솔에 다음 오류를 발생시킨다.

[vuex] 알 수 없는 작업 유형: FETCH_LABel

내가 뭘 놓치거나 잘못하고 있지?제발 내가 이 문제를 해결할 수 있도록 도와줘.

Nuxt.js에서 다음 사항에 주목하십시오.

Modules: store directory 내의 모든 .js 파일은 name upted module(인덱스가 루트 모듈)로 변환된다.

사용 중인 항목:

다음은 내 레이블.js vuex 모듈:

위에 언급된 것과 같은 라벨.js를 사용하여 당신은 당신의 mapAction 도우미가 다음과 같도록 이름보다 앞선 모듈로 모든 것에 접근해야 한다.

methods: {
  ...mapActions({
    nameOfMethod: 'namespace/actionName'
  })
}

그럼 이걸로 하시죠.

...mapActions({
  fetchLabel: 'labels/fetchLabel'
})

또한 작업 이름을 메서드 이름으로 유지하려는 시기를 위해 이를 정리할 수도 있다.

...mapActions('namespace', ['actionName']),
...

그럼 이걸로 하시죠.

...mapActions('labels', ['fetchLabel']),
...

두 경우 모두 계산된 소품은 문제 없이 작동해야 한다.

당신의 액션 이름은fetchLabel아닌 것 같다FETCH_LABEL(그것은 돌연변이다.)인mapActions로 바꾸다.

methods: {
  ...mapActions({
     fetchLabel
  })
},

참조URL: https://stackoverflow.com/questions/51838542/nuxt-js-vuex-using-namespace-modules-in-mapactions-helper-vuex-unknown-ac