스토어 데이터가 필요한 API를 깔끔하게 호출하는 방법

스토어 데이터가 필요한 API를 깔끔하게 호출하는 방법

현재 상태 저장 데이터를 필요로 하는 별도의 api에 접속하려고 할 때 어려움을 겪고 있습니다.그러나 데이터를 가져오는 데 필요한 데이터를 먼저 시작해야 합니다.기본적으로는 vuex에서 상태를 구축하는 초기 설정과 거의 비슷합니다.다음은 예를 제시하겠습니다.

Axi를 사용하여 조직 데이터를 가져온 다음 조직 데이터가 필요한 다른 데이터 집합을 가져오십시오.

스토어 파일은 다음과 같습니다.

import axios from 'axios'

export const state = () => ({
  currentBoard: [],
  ideas: []
})

export const actions = {
  async fetchOrganization({ commit }) {
    const response = await axios
      .get('https://api.getconflux.com/api/v1/organizations/url/ideas')
      .then((res) => res.data)

    commit('add', response)
  },
  async fetchIdeas({ commit }, parameters) {
    const { id, board } = parameters
    const response = await axios
      .get(
        `https://api.getconflux.com/api/v1/public/${id}/ideas?limit=10&page=1&statusId=&q=&orderBy=popularityScore&categoryId=&boardId=${board}`
      )
      .then((res) => res.data)

    commit('addIdeas', response)
  }
}

export const mutations = {
  add(state, board) {
    state.currentBoard = board
  },
  addIdeas(state, ideas) {
    state.ideas = ideas
  }
}

여기 보시는 바와 같이, 저는 이 두 가지를 분리했습니다.actions서로에게서.사용자가 보드 페이지를 누를 때.저 같은 경우에는https://localhost:3000/boardname, 이 조작을 개시합니다.fetchOrganization그 직후에, 조직 상태가 설정되면,currentBoard전화하고 싶다fetchIdeas그런 다음 해당 데이터를 상태로 저장합니다.

보드 뷰는 다음과 같습니다.

<template>
  <div>
    <p>This is {{ $route.params.board }}</p>
    <p>{{ board }}</p>
    <p>{{ ideas }}</p>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'Boards',
  computed: {
    board() {
      return this.$store.state.boards
    },
    ideas() {
      return this.$store.state.ideas
    }
  },
  created() {
    this.$store.dispatch('boards/fetchOrganization')
    if (this.$store.state.boards.currentBoard.id) {
      this.$store.dispatch('boards/fetchIdeas', {
        id: this.$store.state.boards.currentBoard.id,
        board: this.$store.state.boards.currentBoard.IdeaBoards[0].id
      })
    }
  },
  methods: {
    ...mapActions({
      fetch: 'boards/fetchOrganization',
      fetchIdeas: 'boards/fetchIdeas'
    })
  }
}
</script>

이 방법은 효과가 없는 것 같습니다.currentBoardin state는 전화하는 순간 사용할 수 없습니다.fetchIdeas더 나은 방법이 있을까요? 아니면 제가 놓친 게 있나요?

누가 나에게 올바른 방향을 알려주거나 이런 종류의 전화를 걸기 위한 베스트 프랙티스를 알려줄 수 있나요?

아무쪼록 잘 부탁드립니다!

mapState, mapActions, mapGetters 등의 사용 방법에 대해 자세히 알아볼 수 있습니다.

https://vuex.vuejs.org/guide/

<template>
  <div>
    <p>This is {{ $route.params.board }}</p>
    <p>{{ board }}</p>
    <p>{{ ideas }}</p>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  name: 'Boards',
  computed: {
    ...mapState({
      boards: state => state.boards,
      ideas: state => state.ideas
    })
  },
  async created() {
    await this.fetchOrganization();
    if (this.boards.currentBoard.id) {
      this.fetchIdeas({
        id: this.boards.currentBoard.id,
        board: this.boards.currentBoard.IdeaBoards[0].id
      });
    }
  },
  methods: {
    ...mapActions({
      fetchOrganization: 'boards/fetchOrganization',
      fetchIdeas: 'boards/fetchIdeas'
    })
  }
};
</script>

를 사용하는 것을 추천합니다.promise콜의 데이터에 액세스 하기 전에 비동기 콜이 종료될 때까지 대기할 필요가 있기 때문에, 그 콜에 대해서, 콜을 클릭합니다.

created() {
    Promise.all([
        this.$store.dispatch('boards/fetch')
    ]).finally(() => {
        if (this.$store.state.boards.currentBoard.id) {
            this.$store.dispatch('boards/fetchIdeas', {
               id: this.$store.state.boards.currentBoard.id,
               board: this.$store.state.boards.currentBoard.IdeaBoards[0].id
            })
        }
    });
},

언급URL : https://stackoverflow.com/questions/62339040/how-to-cleanly-call-an-api-that-requires-store-data