Nuxt 가져오기 내에서 Vuex 작업이 "함수가 아님"
방금 내 Nuxt 페이지 중 하나에 오류 처리를 도입했는데, 액션이 매핑되어 내부에서 호출되었습니다.fetch
a 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
'programing' 카테고리의 다른 글
목표 C: BOOL vs BOOL (0) | 2022.08.13 |
---|---|
정의와 선언의 차이점은 무엇입니까? (0) | 2022.08.13 |
int의 자리수를 얻는 방법? (0) | 2022.08.13 |
Vue 템플릿에서 사용자 지정 특성 바인딩이 가능합니까? (0) | 2022.08.13 |
계산된 VueJ의 이전 값에 액세스합니다.s (0) | 2022.08.13 |