javascript - 在 VUETIFY 应用程序中使用 VUEX 和 AXIOS 不会出现 api 数据

Question

我正在尝试使用 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>

存储/模块/client.module.js

import axios from 'axios'

const URL = 'http://192.168.15.11:3000/clients';
const client = {
  state: () => ({
    clients: [],
    loading: true
  }),

  mutations: {
    updateClients(state, clients) {
      state.clients = clients
    },
    changeLoadingState(state, loading) {
      state.loading = loading
    }
  },

  actions: {
    loadData({commit}) {
      axios.get(URL).then((response) => {
        console.log(response.data, this)
        commit('updateClients', response.data)
        commit('changeLoadingState', false)
      })
    }
  },

  getters: {
    //
  }
}

export default client;

存储/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,
  },
})

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

标签： javascriptvue.jsvuexvuetify.jsvuex-modules