VueX 状态在第一次进入时不呈现

Question

每当我在我的商店中保存第一个项目时，它不会显示在前端，只有我的按钮会显示。添加第一行并刷新后，我可以添加更多行，这些行确实会显示出来。我尝试制作一个 clientIndex，因为我认为它可能因为“field.id”而没有更新，但这并没有改变。

谁能告诉我如何解决它？

我的index.js

     state: {
        clientfields: [],
        clients: [],
    },
    mutations: {
        setClientFields(state, fields) {
            state.clientfields = fields;
        },         

        setClients(state, clients) {
            state.clients = clients;
        },
        deleteClient(state, client) {
            state.clients.splice(state.clients.indexOf(client), 1);
        },
        addClient(state, client) {
            state.clients.unshift(client);
        },
        actions: {
        fetchClients({ state, commit }) {
            axios.get('http://localhost:8000/api/clients')
                .then(response => {
                    console.log(response.data.data);
                    
                    commit("setClients", response.data.data)
                    commit("setClientFields", Object.keys(state.clients[0]))
                    console.log(Object.keys(state.clients));
                })
            },
        deleteClient({ commit }, clientdata) {
            axios.delete("http://localhost:8000/api/clients/" + clientdata.id)
            commit("deleteClient", clientdata)
        },
        saveClient({ commit }, clientdata) {
            let promise;    
            if (clientdata.id != null) {
                promise = axios.put("http://localhost:8000/api/clients/" + clientdata.id, clientdata)
                console.log(clientdata)
            } else {
                console.log(clientdata)
                promise = axios.post("http://localhost:8000/api/clients/", clientdata)
            }
            promise.then(function (response) {
                if (clientdata.id != null) {
                    commit("saveClient", clientdata)
                } else {
                    commit("addClient", response.data.data)
                }
            })
            .catch(function (error) {
                console.log(error.response);
                commit('error', error.response)
            })
        }, 
}

我的组件

<template>
  <div class="app" >
    <v-btn tile elevation="4" style="margin-left: 20px margin-top: 20px;" v-if="! showEdit" class="btn btn-blue left" v-on:click="saveClient">Nieuwe Client</v-btn>
    <table class="table-auto">
      <thead>
        <tr class="md:border-t-2 border-collapse border border-gray-600 ...">
          <th class="px-4 py-2 ">Edit</th>
          <th class="px-4 py-2 ">Delete</th>
          <th class="px-4 py-2 allow-overflow" v-for="field in fields" :key="field.id">{{ field.replace("_"," ") }}</th>
        </tr>
      </thead>
      <tr class="md:border-t-2 border-collapse border border-gray-600 ..." v-for='(clientdata, clientIndex) in clients' :key="clientIndex">
        <td class="px-4 py-2 font-medium">
          <v-btn class="ocz" v-on:click="updClient(clientdata)">          
              Edit
          </v-btn>
        </td>
        <td class="px-4 py-2 font-medium">
          <template>
            <v-dialog
                v-model="confirm"
                width="350"
            >
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                color="red"
                v-bind="attrs"
                v-on="on"
              >
                Delete
              </v-btn>
            </template>
              <v-card>
                <v-card-title class="text-h5">
                  ARE YOU SURE YOU <br> WANT TO DELETE THIS?
                </v-card-title>
                <v-card-actions>
                  <v-btn
                    color="grey"
                    text
                    @click="confirm = false"
                  >
                    Cancel
                  </v-btn>
                  <v-btn
                    color="red"
                    text
                    @click="delClient(clientdata); confirm = false;"
                  >
                    Delete
                  </v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
          </template>
        </td>

        <td class="px-4 py-2 font-medium" v-for="field in fields" :key="field.id">{{ clientdata[field] }}</td>
      </tr>
      <tr v-if="!clients.length" >
        <td class="px-4 py-2 font-medium" style="opacity: 0.6;">No data to be shown.</td>
      </tr>

    </table>

    <transition name="fade">
      <div class="modal" v-if="dialog">
          <div class="modal-content">
            <EditModal :client="selClient" v-show="showEdit" @close="closeEdit"/>
          </div>
      </div>
    </transition>
  </div>
</template>

<script>

import EditModal from '@/components/Clients/EditClients.vue'


export default{
  dialog: false,
  overlay: true,
  components: {
    EditModal,
  },

  data () {
    return {
      selClient: {},
      showEdit: false,
      confirm: false,
      clientIndex: 100,
    }
  },
  created () {
    this.$store.dispatch('fetchClients')
  },
  computed: {
    clients() {
        return this.$store.state.clients;
      },
    fields() {
      return this.$store.state.clientfields;
    }
  },
  methods: {
    
    closeEdit: function() {
      this.showEdit = false;
      this.dialog = false;
    },
    delClient: function(clientdata) {
      this.clientIndex--;
      this.$store.dispatch('deleteClient', clientdata)
    },
    updClient: function(clientdata) {
      this.selClient = clientdata;
      this.showEdit = true;
      this.dialog = true;
      this.clientIndex++;
      this.$store.dispatch('saveClient', clientdata)
    },
    saveClient: function(clientdata) {
      this.showEdit = true;
      this.dialog = true
      this.clientIndex++;
      this.$store.dispatch('saveClient', clientdata);
    },
    createClient(){
      this.selClient = {};
    }
  }
}
</script>

Answer 1

我修复了它，在我的索引中，我只是在保存时提交了我的字段数据，所以我的 table 得到填充并显示数据。

            promise.then(function (response) {
                if (clientdata.id != null) {
                    commit("saveClient", clientdata)
                } else {
                    commit("addClient", response.data.data)
                }
            ! added my commit here to fill fields :) !
            })

VueX 状态在第一次进入时不呈现

VueX State Not Rendering On First Entry

vue.js

vuex