programing

Nuxt 가져오기 내에서 Vuex 작업이 "함수가 아님"

newsource 2022. 8. 13. 12:17

Nuxt 가져오기 내에서 Vuex 작업이 "함수가 아님"

방금 내 Nuxt 페이지 중 하나에 오류 처리를 도입했는데, 액션이 매핑되어 내부에서 호출되었습니다.fetcha not function 오류를 발생시킵니다.이 경우,try/catch블록이 없습니다.예상대로 동작하고, 에러는 전혀 없습니다.

다음은 필수 부품까지 분해한 구성 요소입니다.

export default {
  name: 'ViewArticle',
  async fetch ({ error }) {
    try {
      await this.fetchArticle({ articleSlug: this.articleSlug })
    } catch (err) {
      error({ statusCode: 404, message: 'May the force be with you' })
    }
  },
  computed: {
    ...mapGetters({
      article: 'article/single'
    }),
    articleSlug () {
      return this.$route.params.articleSlug
    }
  },
  methods: {
    ...mapActions({
      fetchArticle: 'article/fetchOne'
    })
  }
}

mapActions는 spiel의 후반부에서만 실행될 것으로 추측되지만 오류를 방지하는 방법을 찾을 수 없습니다.이렇게 하면 기본적으로 페이지를 로드할 때마다 오류 페이지로 즉시 리디렉션됩니다.

에러 메세지는 다음과 같습니다.물론. 뻔하지.fetchArticle 함수가 되는 것입니다.또, 그것이 내부가 아닌 한,try/catch블록, 예상대로 작동합니다.

this.fetchArticle is not a function                                                                                                               03:30:51

  at Object.fetch (52.js:32:18)
  at server.js:2881:39
  at Array.map (<anonymous>)
  at module.exports../.nuxt/server.js.__webpack_exports__.default (server.js:2864:51)

Fetch가 제공하는 것은context의론으로서

fetch(context)

문맥 안에서 우리는 우리의 가게를 찾을 수 있다.여기에서는, 콘텍스트의 내용을 확인할 수 있습니다.https://nuxtjs.org/api/context

fetch(context) {
   let store = context.store;
}

사람들은 그것을 파괴하는 것을 좋아한다.

fetch({ store }) {}

코드는 다음과 같습니다.

  async fetch ({ error, store }) {
    try {
      await store.dispatch('article/fetchOne', { articleSlug: this.articleSlug })
    } catch (err) {
      error({ statusCode: 404, message: 'May the force be with you' })
    }
  },

fetch는 서버 측에서 실행되기 때문에 얻을 수 있습니다.is not an function오류. 정의되지 않았습니다.

서버 측에서 가져오기를 호출합니다.

사용하다async fetch({store})

  async fetch ({ error, store }) {
    try {
      await store.dispatch( 'article/fetchOne' , { articleSlug: this.articleSlug })
    } catch (err) {
      error({ statusCode: 404, message: 'May the force be with you' })
  }

언급URL : https://stackoverflow.com/questions/64218232/vuex-action-not-a-function-inside-nuxt-fetch