Vuex의 액션이 약속을 반환하는 이유는 무엇입니까?

Vuex의 액션이 약속을 반환하는 이유는 무엇입니까?

Vuex 작업에는 컴포넌트에서 payload를 가져오는 변환(개체를 반환하기 위한 인덱스 수)이 있습니다.Vuex js 파일에서는 정상적으로 동작합니다.이것은 payload에서 인덱스를 가져온다고 말한 바와 같이 콘솔에서 선택한 항목을 보여 줍니다.그러나 컴포넌트에서는 정상적으로 동작합니다.Promise <Pending>왜 그런 일이 일어나는 거죠?지금은 Nuxt/Vue 앱에 API를 사용하지 않지만, 지금으로서는 왜 이런 일이 일어나는지, 그리고 이 문제를 해결하기 위한 최선의 솔루션이 무엇인지 알고 싶습니다.

Vuex 코드:

export const state = () => ({
  articles: [
    {
      uid: 0,
      img: 'https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/1.jpg',
      link: '/articles/1',
    },
    {
      uid: 1,
      img: 'https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/2.jpg',
      link: '/articles/2',
    },
  ],
})
export const getters = {
  getArticles(state) {
    return state.articles
  },
}
export const mutations = {
  getSpeceficArticle(state, payload) {
    return state.articles[payload]
  },
}
export const actions = {
  getSpeceficArticle({ commit }, payload) {
    commit('getSpeceficArticle', payload)
  },
}

내 컴포넌트 코드는 다음과 같습니다.

<template>
  <div class="article">
    {{ getSpeceficArticle() }}
    <div class="article__banner">
      <img src="" alt="" />
    </div>
    <div class="article__text">
      <p></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeArticlesArticle',
  data() {
    return {
      item: '',
    }
  },
  // computed: {},
  methods: {
    async getSpeceficArticle() {
      return await this.$store.dispatch('articles/getSpeceficArticle', 0)
    },
  },
}
</script>

actions돌연변이와 같은 상태를 갱신하기 위해 사용되지만 이들 사이의 주요 차이점은 동작에 비동기 태스크가 포함될 수 있다는 것입니다.특정 인덱스로 특정 기사를 가져오려면 getter라는 이름의 getter를 사용합니다.getArticleByIndex:

export const getters = {
  getArticles(state) {
    return state.articles
  },
getArticleByIndex:: (state) => (index) => {
    return state.articles[index]
  }
}

그런 다음 다음과 같은 계산 속성을 정의합니다.articleByIndex:

<script>
export default {
  name: 'HomeArticlesArticle',
  data() {
    return {
      item: '',
    }
  },
   computed: {
     articleByIndex(){
           return this.$store.getters.articles.getArticleByIndex(0)
        }

   },
  methods: {
   
  },
}
</script>

@Mohammad는 Vuex의 getters/actions 등을 많이 사용하고 있고, 그것들이 조금 수다스러워지기 시작하면, 그것을 도입할 수 있다.mapGettersVuex에서 호출 이름을 좀 더 편리한 것으로 변경합니다.그래서 네 대본은

<script>
import { mapGetters } from 'vuex'  
export default {
  name: 'HomeArticlesArticle',
  data() {
    return {
      item: '',
    }
  },
   computed: {
     articleByIndex(){
       return this.getArticleByIndex(0)
     }
   },
    methods: {
      ...mapGetters({
        getArticleByIndex: 'articles/getArticleByIndex',
      })
    },
}
</script>

추가할 수 있습니다....mapGetters,...mapActions계산 섹션으로 이동합니다.

vuex 액션에는 웹 서비스 콜이 없으므로 컴포넌트에서 비동기 및 wait 키워드를 삭제해 보십시오.나중에 웹 서비스 콜을 추가하면 해결 및 거부 기능을 사용하여 새로운 Promise에서 액션바디를 랩하고 비동기 및 대기 컴포넌트를 컴포넌트에서 사용할 수 있습니다.이게 당신에게 도움이 되는지 알려주세요.

언급URL : https://stackoverflow.com/questions/68151965/why-action-of-vuex-returns-a-promisepending