Vue 3 - 组合 API 获取数据？答案

【问题标题】：Vue 3 - Composition API fetching data?Vue 3 - 组合 API 获取数据？
【发布时间】：2021-10-28 18:55:37
【问题描述】：

我对组合 API 和获取数据有点困惑。当我打开页面时，我可以看到呈现的类别列表，但是如果我想在 setup() 中使用类别，它是未定义的。如何在设置函数中使用类别值？你可以看到我想要控制台日志类别。

Category.vue

<template>
  <div class="page-container">
    <item
      v-for="(category, index) in categories"
      :key="index"
      :item="category"
      :is-selected="selectedItem === index"
      @click="selectItem(index)"
    />
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import Item from '@/components/Item.vue'

export default {
  components: {
    Item
  },

  setup () {
    const store = useStore()

    store.dispatch('categories/getCategories')

    const categories = computed(() => store.getters['categories/getCategories'])
    const selectedItem = ref(1)

    const selectItem = (index) => {
      selectedItem.value = index
    }
    
    console.log(categories.value[selectedItem.value].id)

    return {
      categories,
      selectedItem,
      selectItem
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/assets/scss/general.scss';
</style>

categories.js - vuex 模块

import axios from 'axios'
import { API_URL } from '@/helpers/helpers'

export const categories = {
  namespaced: true,
  state: {
    categories: []
  },

  getters: {
    getCategories: (state) => state.categories
  },

  mutations: {
    UPDATE_CATEGORIES: (state, newValue) => { state.categories = newValue }
  },

  actions: {
    async getCategories ({ commit }) {
      await axios.get(`${API_URL}/getCategories.php`).then(response => {
        commit('UPDATE_CATEGORIES', response.data.res_data.categories)
      })
    }
  },

  modules: {
  }
}

【问题讨论】：

标签： vue.js vuex vuejs3

【解决方案1】：

在设置函数中，您无法处理计算函数。
如果您想在设置函数中进行处理，您可以改为访问 store.getters['categories/getCategories'].value[selectedItem.value].id。

【讨论】：