Quasar QTable에 반영되지 않은 vuex 데이터 변경 사항

Quasar QTable에 반영되지 않은 vuex 데이터 변경 사항

Quasar를 Vuex와 함께 사용하여 데이터 세트를 QTable로 로드하고 있습니다.정상적으로 동작하고 있습니다만, QPOPupEdit을 사용하여 프로젝트의 상태를 변경하려고 합니다.데이터는 Laravel API에서 가져옵니다.원래 데이터 세트는 Laravel Resource이기 때문에 각각 Status 객체(item.status_id 및 status: id, status: name 등)를 가진 아이템이 있습니다.

첫 번째 레코드의 상태 값을 q-table 외부에 노출하여 API에 업데이트를 푸시하면 변경된 Item 리소스가 반환되고 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>

스크립트에서 발췌한 것

import { mapState } from 'vuex'
import { date } from 'quasar'
export default {
data () {
  return {
    inFullscreen: false,
    visibleColumns: [ 'user', 'name', 'status', 'updated_at', 'notes', 'id' ],
    columns: [
      { name: 'user', align: 'left', label: 'Client', field: row => row.order.user.firstname, format: (val, row) => `${val}`, sortable: false },
      { name: 'name', required: true, label: 'Name', align: 'left', field: row => row.service.name, format: val => `${val}`, sortable: true },
      { name: 'status', align: 'left', label: 'Status', field: row => row.status.name, format: val => `${val}`, sortable: true },
      { name: 'updated_at', align: 'left', label: 'Last Updated', field: row => row.status.updated_at, format: val => `${val}`, sortable: true },
      { name: 'notes', align: 'left', label: 'Notes', field: 'notes', sortable: false },
      { name: 'id', align: 'right', label: 'Actions', field: 'id', sortable: false }
    ]
  }
},
mounted () {
  this.fetch()
  if (!this.statuses || this.statuses.length < 1) {
    this.$store.dispatch('items/fetchStatuses')
  }
},
computed: {
  ...mapState({
    loading: state => state.auth.loading,
    authuser: state => state.auth.user,
    pagination: state => state.items.pagination,
    items: state => state.items.items,
    statuses: state => state.items.statuses
  })
},
methods: {
  saveStatus (value, item, index) {
    console.log(value + ' | ' + index)
    console.log(item)
    let payload = { 'status_id': value, 'item_id': item.id, 'index': index }
    this.$store.dispatch('items/saveStatus', payload)
  },
  formatDate (dt, mask) {
    return date.formatDate(date.extractDate(dt, 'YYYY-MM-DDTHH:mm:ss.SSSSSSZ'), mask)
  },
  fetch () {
    this.$store.dispatch('auth/statusLoading', true)
    this.$store.dispatch('items/fetchItems', this.id).then((res) => {
      this.$store.dispatch('auth/statusLoading', false)
    }).catch(error => {
      if (error) {
        console.log(error)
      }
    })
  },
}
}

그리고 vuex 아이템 모듈에서의 나의 액션과 변환은

export function saveStatus ({ state, commit, getters }, payload) {
  return new Promise((resolve, reject) => {
    axiosInstance.post('/api/status/update/Item/' + payload.item_id, payload)
      .then(response => {
        // alert(JSON.stringify(response, null, 4))
        let pl = { 'item': response.data.data }
        commit('setIndexItem', pl)
        resolve(null)
        // console.log(response)
        // commit('setItems', response.data.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

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

Laravel API 파트가 동작하고 있는 것을 알고 있습니다.데이터베이스와 아이템에서 값이 갱신되고 있으며 업데이트된 상태가 vuex 스토어로 반환되고 있으며 디버깅을 위한 첫 번째 노출된 요소에 반영되어 vuex 저장소에서 갱신되고 있지만 QTable에서는 갱신되지 않습니다.

어레이 변경 감지가 뷰를 갱신하지 않을 수 있습니다.Vue를 사용할 수 있습니다.뷰를 갱신하도록 설정하다

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)
}

여기서부터: vue.js 2 vuex에서 스토어 값을 감시하는 방법

상태 변경을 듣기 위해 구성 요소의 감시자를 사용하면 안 됩니다.getters 기능을 사용하여 컴포넌트에 매핑하는 것을 추천합니다.

import { mapGetters } from 'vuex'

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

매장 내:

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

컴포넌트에 있는 이.myState를 사용하면 스토어에서 변경된 내용을 들을 수 있습니다.

https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper

언급URL : https://stackoverflow.com/questions/62969015/changes-to-vuex-data-not-reflected-in-quasar-qtable