Javascript 使用VUEX和AXIOS时，api数据不会显示在VUETIFY应用程序中

我正在尝试使用VUEX和AXIOS显示来自API的数据，但是在我的屏幕上没有显示任何内容，如图所示：

但在console.log中，数据会显示：

在Vue开发工具中，它显示如下：

我尝试了不同的方法，但由于经验不足，我没有成功，我希望得到帮助

请按我的密码操作：

客户端.vue

<template>
  <!-- Inicio do CONTAINER principal -->
  <v-container fluid>
        <v-row
          justify="center"
        >
          <!-- Inicio do BLOCO principal -->
          <v-col
            md="9"
            xs="12"
          >
            <nav-bar />
              <v-card
                class="mx-auto"
                flat
                height="900"
              >
                <v-list-item three-line>
                  <v-list-item-content>
                    <v-list-item-title class="display-1 font-weight-black">{{ pageName }}</v-list-item-title>
                  </v-list-item-content>

                  <!-- Inicio BLOCO button actions -->
                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn
                      color="success"
                      depressed
                      large
                    >
                      New Client
                    </v-btn>
                  </v-card-actions>
                  <!-- Final BLOCO button actions -->

                </v-list-item>
                
                <!-- Inicio COMPONENTE TAB -->
                <v-card
                  flat
                  tile
                >
                  <v-col>
                    <v-tabs>
                      <v-tab class="text-capitalize">Search</v-tab>
                      <v-tab class="text-capitalize">Dashboard</v-tab>
                      <v-tab-item>
                        <v-divider></v-divider>
                        <!-- Início BLOCO Table-->
                        <v-card
                          flat
                          tile
                        >
                          <v-col
                            justify="center"
                          >
                              <v-col
                                md="5"
                              >
                                <v-text-field
                                  v-model="search"
                                  append-icon="mdi-magnify"
                                  label="Search"
                                  single-line
                                  outlined
                                  dense
                                  class="pt-3"
                                ></v-text-field>
                              </v-col>
                            <v-data-table
                              :headers="headers"
                              :items="clients"
                              :search="search"
                            ></v-data-table>
                          </v-col>
                        </v-card>
                        <!-- Final BLOCO Table-->
                      </v-tab-item>
                    </v-tabs>
                  </v-col>
                </v-card>
                <!-- Final COMPONENTE TAB -->
              </v-card>
          </v-col>
          <!-- Final do BLOCO principal -->
        </v-row>
  </v-container>
  <!-- Final do CONTAINER principal -->
</template>

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

const state = mapState(['clients']);

export default {
    name: 'Clients',
    computed: state,
    data: () => ({
      pageName: 'Clients',
      search: '',
      headers: [
          { text: 'Name', value: 'firstName' },
          { text: 'Phone', value: 'phone' },
          { text: 'E-mail', value: 'email' },
      ],
    }),
    
    created () {
      this.initialize()
    },
    
    methods: {
      initialize () {
        //console.log(this.$store)
        this.$store.dispatch('loadData') // dispatch loading
      },
    },
  }
</script>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth.module'
import client from './modules/client.module'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth:auth,
    client:client,
  },
})

---

注意：身份验证部分在这种形式的存储模块中工作得很好

您是否尝试过

返回状态。clients=clients

和/或使用getter而不是直接访问

状态

？这两种形式对我不起作用，似乎问题出在v-binds`v-data-table:headers=“headers”部分：items=“clients”：search=“search”v-data-table`因为控制台即将到来，它只是没有显示在表中。您是否尝试过

返回状态。clients=clients

和/或使用getter而不是直接访问

状态

，问题似乎出在v-binds`v-data-table:headers=“headers”：items=“clients”：search=“search”v-data-table`的部分，因为控制台即将到来，它只是没有显示在表中

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth.module'
import client from './modules/client.module'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    auth:auth,
    client:client,
  },
})