如何干净利落地调用需要存储数据的API？

Question

我目前在试图访问一个单独的api时，需要将数据存储在状态中，我很苦恼。然而，需要从所需数据中获取数据需要先开始。基本上，它几乎就像一个初始设置，将在vuex中构建出我的状态。下面是一个例子。

用axios获取组织数据，然后获取（得到）另一组需要组织数据的数据。

这是存储文件。

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>

这似乎行不通，因为 currentBoard 的状态下，在我打电话给 fetchIdeas. 是否有更好的方法，或者我是否完全错过了什么？

有谁能告诉我正确的方向，或者让我知道做这种电话的最佳做法是什么？

先谢谢你，任何帮助都将被感激!

Answer 1

你可以学习更多关于如何使用mapState,mapActions,mapGetters等的知识。

https:/vuex.vuejs.orgguide

<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>

Answer 2

我建议使用 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
            })
        }
    });
},