如何在 Vuex 的操作中使用 axios 获取 Rest API 数据？

Posted 2023-02-23

【中文标题】如何在 Vuex 的操作中使用 axios 获取 Rest API 数据？

【英文标题】：How to get RestAPI data using axios in actions of Vuex?

【发布时间】：2021-01-12 09:24:30

【问题描述】：

我试图获取 RestAPI 数据以在 Vuex 系统的操作中使用 axios 并在组件中显示该信息。 所以我尝试使用测试 API 示例制作小应用程序， 但发生错误。

我用过test API。 它包括 5 个键，例如“postId”、“id”、“name”、“email”、“body”。 就我而言，我只想向我的组件显示“id”信息。 但是错误消息说“TypeError：无法读取未定义的属性'id'”

我的 Vuex 代码如下 商店/customer.ts

    import  MutationTree, ActionTree, GetterTree  from "vuex";
import  RootState  from "../types";
import  Customer  from "../types/customer";
import axios from "axios";

interface State 
  customer: Customer;

export const state = () => (
  customer: []
);
export const getters: GetterTree<State, RootState> = 
  customer: (state: State) => state.customer
;
export const mutations: MutationTree<State> = 
  setCustomer(state: State, customer: Customer) 
    state.customer = customer;
  
;
export const actions: ActionTree<State, RootState> = 
  getCustomerInfo: async ( commit ) => 
    const data = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1/comments"
    );
    commit("setCustomer", data.data.customer);
  
;
export default state,getters,mutations,actions

我在直接类型中定义了 RootState 和 Customer 的类型。 我真的不明白如何在突变中将数据设置为 setCustomer 通过行动。 类型/index.ts

export interface RootState 

类型/customer.ts

    export interface Customer 
    postId?: number;
    id?: number;
    name?: string;
    email?: string;
    body?: string;
  

下面还有我的 vue 组件 测试.vue

<template>
  <div>
    <Counter />
    <p>vuex test</p>
    <p> customer.id </p>
  </div>
</template>
<script lang="ts">
import  Component, namespace, Vue  from 'nuxt-property-decorator'
import  Customer  from '~/types/customer'
const SCustomer = namespace('customer')

@Component()
export default class extends Vue 
  @SCustomer.Action getCustomerInfo!: Function
  @SCustomer.State customer!: Customer

  async created() 
    await this.getCustomerInfo()
  

</script>

我真的很懂vuex！ 有人可以给我建议吗？

【参考方案1】：

在状态下，确保请求成功并且在提交突变之前您有数据。您需要一个 getter 才能访问状态数据。确保您可以访问状态 Actions，否则，您将需要 mapActions。希望对您有所帮助。

import  MutationTree, ActionTree, GetterTree  from "vuex";
import  RootState  from "../types";
import  Customer  from "../types/customer";
import axios from "axios";

interface State 
  customer: Customer;

export const state = () => (
  customer: []
);
export const getters: GetterTree<State, RootState> = 
  customer: (state: State) => state.customer
;
export const mutations: MutationTree<State> = 
  setCustomer(state: State, customer: Customer) 
    state.customer = customer;
  
;
export const actions: ActionTree<State, RootState> = 
  getCustomerInfo: async ( commit ) => 
    const data = await axios.get(
      "https://jsonplaceholder.typicode.com/posts/1/comments"
    ).then((response) => 
        if(response.status === 'success')
            commit("setCustomer", data.data.customer);
        
   )
  ;
;
export default state, getters, mutations, actions

在 Vue 实例中

<template>
  <div>
    <Counter />
    <p>vuex test</p>
    <p> customer.id </p>
  </div>
</template>
<script lang="ts">
import  Component, namespace, Vue  from 'nuxt-property-decorator'
import  Customer  from '~/types/customer'
const SCustomer = namespace('customer')

@Component()
export default class extends Vue 
  @SCustomer.Action getCustomerInfo!: Function
  @SCustomer.State customer!: Customer

    computed: 
       ...mapGetters(['customer'])
    ,

    created() 
        this.getCustomerInfo()
    

</script>

【讨论】：

非常感谢您的建议！我试图根据您的建议重写我的代码。但是发生了一些错误。在“response.status === 'success'”的 store/customer.ts 中，错误消息如下。此条件将始终返回 'false'，因为类型 'number' 和 'string' 没有重叠。

在 test.vue 中，我认为计算方法替换了 nuxt-property-decorator 中的 get 方法。所以我改写成“get() mapGetters(['customer']) ;”

在“data.data.customer”的 store/customer.ts 中，错误消息如下。类型“void”上不存在属性“数据”。

非常感谢您的回答。对不起，我是超级初学者，我试图理解你的答案............

@drunkdolphin，我认为您的响应状态为 200（ok），因此请确保您将响应数据排除在外。改变它 response.status === 200

【参考方案2】：

在 test.vue 文件中， 我在模板中从 customer.id 更改为 customer。

在 store/customer.ts 中， 我改变了这样的动作功能。

commit('setCustomer',data.data.response) ⇒　commit('setCustomer',data.data)

在第一个代码中，我从测试 API 获取数据，但我的请求数据代码错误。 Mr.Kimsea Sok，非常感谢您的建议！！