如何干净地调用需要存储数据的 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>

这似乎不起作用，因为当我调用 fetchIdeas 时，状态中的 currentBoard 不可用。有没有更好的方法，或者我完全错过了什么？

谁能指出我正确的方向，或者让我知道进行此类呼叫的最佳做法是什么？

提前致谢，任何帮助将不胜感激！

Answer 1

你可以学习更多关于如何使用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>

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
            })
        }
    });
},