Vuex 스토어에서 작업을 디스패치하려고 하면 Nuxt가 '알 수 없는 작업 유형' 오류를 발생시킵니다.

Vuex 스토어에서 작업을 디스패치하려고 하면 Nuxt가 '알 수 없는 작업 유형' 오류를 발생시킵니다.

vuex 상태로 저장하는 작업을 사용하여 Firebase 백엔드에서 일부 데이터를 가져오려고 합니다.지금은 더미 데이터를 가지고 작업 중입니다.내 index.vue 스토어에서 데이터를 읽으면 작동하지만 index.vue에서 작업을 가져오려고 하면 알 수 없는 작업 유형이라는 오류가 나타납니다.

스토어/아티클스/아티켈스

export const state = () => ({
artikel: [
    {
        id: "1",
        titel: "Hallo",
        untertitel: "Servas"
    },
    {
        id: "2",
        titel: "Was",
        untertitel: "Wos"
    },
    {
        id: "3",
        titel: "Geht",
        untertitel: "Wüst"
    }
 ]

})

export const actions = () => ({
   fetchArtikel() {
      console.log('fetch data from firebase')
   }
})

export const getters = () => ({
   artikel: (state) => {
      return state.artikel
   }
})

index.vue 입니다.

<script> 
import { mapActions } from 'vuex'

export default {
  name: 'App',
computed: {
  artikel() {
    return this.$store.state.artikels.artikel
  }
},
async created() {
  await this.$store.dispatch('artikels/fetchArtikel')
}
</script>

이미 네임스페이스 없이 스토어를 store/index.js에 저장하려고 시도했고 mapActions와 비동기 fetch를 통해 디스패치를 시도했습니다.

import mapActions from 'vuex'

methods: {
  ...mapActions(['artikels/fetchArtikels'])
}

또는 다음과 같이 입력합니다.

async fetch({store}) {
  await store.dispatch('artikels/fetchArtikels')
}

아직까지는 운이 없다.누가 나 좀 도와줄래?잘 부탁드립니다!

문제는 당신의 가게입니다.actions그리고.getters는 함수이지만 오브젝트여야 합니다.

// store/artikels.js
export const actions = () => ({/*...*/}) // ❌ function
export const getters = () => ({/*...*/}) // ❌ function

export const actions = {/*...*/} // ✅ object
export const getters = {/*...*/} // ✅ object

데모

사용 방법:

import { mapGetters, mapActions } from 'vuex'

computed: {
...mapGetters(['artikel'}]
},
methods: {
  ...mapActions(['fetchArtikels'])
},
async created() {
  await this.fetchArtikel()
}

언급URL : https://stackoverflow.com/questions/69469218/nuxt-is-throwing-the-error-unknown-action-type-when-i-try-to-dispatch-action-f