Vuejs2 Quasar QTable中未反映对vuex数据的更改

我正在使用Quasar和Vuex将数据集加载到QTable中。它工作得很好，但我正在尝试使用QPopupEdit来更改项目的状态。数据是从一个Laravel API提取的，原始数据集是一个Laravel资源，因此我有一些项，每个项都有一个状态对象（item.Status\u id和Status:id、Status:name等）

我已经公开了q表外第一条记录的状态值，当我将更新推送到API时，我返回更改的项资源，将其插入Vuex中的Vuex数据中，它不会在表中更新

<div v-if="items && items[0] && items[0].order">
  {{items[0].status.id}} | {{items[0].status.name}}
</div>

<q-table
  title="Projects"
  :data="items"
  :columns="columns"
  color="primary"
  row-key="id"
  :loading="loading"
  no-data-label="no projects with search prameters"
  :visible-columns="visibleColumns">
  <template v-slot:top="props">
    <q-btn
      flat round dense
      :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
      @click="props.toggleFullscreen"
      class="q-ml-md"
    />
    <q-space />
    <q-select
      v-model="visibleColumns"
      multiple
      borderless
      dense
      options-dense
      emit-value
      map-options
      :options="columns"
      option-value="name"
      style="min-width: 150px"
    />
  </template>
  <template v-slot:body="props">
    <q-tr :props="props">
      <q-td key="user" :props="props">
        {{ props.row.order.user.firstname }} {{ props.row.order.user.lastname }}
      </q-td>
      <q-td key="name" :props="props">
        {{ props.row.service.name }}
      </q-td>
      <q-td key="status" :props="props">
        <q-badge v-if="props.row.status" :color="props.row.status.color" outline>
          {{ props.row.status.name }}
        </q-badge>
        <q-popup-edit v-model="props.row.status.id" :key="item">
          <q-select fill-input color="primary" v-model="props.row.status.id" :key="props.row" :options="statuses" label="Status" emit-value map-options option-label="name" @input="(val) => saveStatus(val, props.row, index)" />
        </q-popup-edit>
        {{props.row.status.id}} | {{props.row.status_id}}
      </q-td>
      <q-td key="updated_at" :props="props">
        {{ formatDate(props.row.updated_at, 'MMM D, YYYY HH:mm A')}}
      </q-td>
      <q-td key="notes" :props="props">
        <div class="table-description cursor-pointer">
          <q-icon v-if="!props.row.notes" name="fal fa-comment-alt" class="float-right" />
          {{ props.row.notes }}
          <q-popup-edit
            buttons
            v-model="props.row.notes"
          >
            <q-input
              type="textarea"
              v-model="props.row.notes"
              autofocus
              counter
              @keyup.enter.stop
            />
          </q-popup-edit>
        </div>
      </q-td>
      <q-td key="id" :props="props">
        <q-btn icon="fal fa-arrow-right" :to="'/item/' + props.row.id" class="cursor-pointer" />
      </q-td>
    </q-tr>
  </template>
</q-table>

我知道Laravel API部件正在工作-数据库中的值正在更新，项目的更新状态正在返回vuex存储，vuex存储库中的更新状态反映在公开的第一个调试元素中，但在QTable中，它不会更新。

可能导致视图未更新。可以使用更新视图

import Vue from 'vue'

// ...

export function setIndexItem (state, payload) {
  var index = state.items.findIndex(i => i.id === payload.item.id)
  Vue.set(state.items, index, payload.item)
}

由此：

您不应该使用组件的观察程序来监听状态更改。我建议您使用getter函数，然后将它们映射到组件中

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      myState: 'getMyState'
    })
  }
}

在您的店铺中：

const getters = {
  getMyState: state => state.my_state
}

通过在组件中使用this.myState，您应该能够侦听对应用商店所做的任何更改

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      myState: 'getMyState'
    })
  }
}

const getters = {
  getMyState: state => state.my_state
}