Vuetify 데이터 테이블에서 Vuex 상태를 올바르게 업데이트하려면 어떻게 해야 합니까?

Vuetify 데이터 테이블에서 Vuex 상태를 올바르게 업데이트하려면 어떻게 해야 합니까?

Vue, Vuex 및 Vuetify를 사용하여 데이터 테이블에 코스를 표시하고 있으며, 인라인 편집을 기능으로 원합니다.아래의 관련 컴포넌트 코드를 참조해 주세요.

#Courses.vue

<template>
  <v-data-table 
  :headers="headers"
  :items="courses"
  :search="search"
  :loading="loading"
  no-data-text="No Courses Available"
  >

    <template slot="items" slot-scope="props">
      <tr>
        <td>
          <v-edit-dialog
          :return-value.sync="props.item.title"
          lazy
          >
            {{ props.item.title }}
            <v-text-field
            slot="input"
            label="Enter New Course Title"
            v-model="props.item.title"
            single-line
            counter
            @keyup.enter="onUpdateCourse({ id: props.item.id, title: props.item.title})"
            ></v-text-field>
          </v-edit-dialog>
        </td>

        <td>{{ props.item.category }}</td>
        <td>{{ props.item.startDate | date }}</td>
        <td>{{ props.item.endDate | date }}</td>
        <td>{{ props.item.location }}</td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data() {
      return {
        headers: [** table headings **],
      };
    },
    computed: {
      courses() {
        return this.$store.getters.courses;
      },
    },
    methods: {
      onUpdateCourse(itemToUpdate) {
        debugger;
        this.$store.dispatch('updateCourse', itemToUpdate);
      },
    },
  };
</script>

동작합니다만, 이 어프로치가 Vuex 의 상태를 직접 변경하는 것에 대해서는 문제 삼습니다.디스패치('update Course', itemToUpdate)를 하는 유일한 이유는 db(이 경우는 firestore)를 갱신하는 것입니다.$store.state를 여기서 직접 동기화하는 것보다 Vuex 액션/명사만으로 업데이트하는 것이 좋다고 생각했습니다.

첫 번째 질문은:이것을 문제 삼아야 하는가?그렇지 않다면 왜 문제 삼지 않는가?

귀찮아서 계산 섹션에 Vuex 과정 배열의 로컬 복사본을 추가했습니다.

localCopy() {
  return this.courses.map(x => Object.assign({}, x));
},

데이터 테이블을 구축했습니다.:items="localCopy"이렇게 하면 Vuex 액션 내에서 과정을 업데이트할 수 있지만 앱의 다른 곳을 클릭할 때까지 데이터 테이블은 업데이트되지 않습니다.

두 번째 질문은 이것이 올바른 접근법이라면 컴포넌트의 반응성을 어떻게 유지할 것인가입니다.

도와주셔서 감사합니다.

(PS – 코드를 오려 붙이거나 텍스트 상자에서 편집할 때 큰따옴표 중 일부가 있는 것 같습니다."불행히도 화려한 인용구로 바뀌어 가고 있다.“제가 난독증 환자라는 것이 두 배로 안타깝고 그들을 찾기 위해 최선을 다했지만 말 그대로 그들을 볼 수 없습니다.미워하지 말아주세요)

변경 사항을 할당하지 않으려면props.item.title, 다음 작업을 수행합니다.

• 를 삭제합니다..sync에<v-edit-dialog :return-value="props.item.title".
• 교체하다v-model와 함께:value에<v-text-field :value="props.item.title".

는 암묵적이고 암묵적인(대략적인) 것을 가지고 있으며, 상기의 단독(삭제).sync및 교환v-model와 함께:value)가 정지합니다.title직접 수정할 수 없습니다.

다음을 통해 수정하려면dispatch추가하다@input디스패치를 호출하는 리스너:@input="onUpdateCourse({ id: props.item.id, title: props.item.title})".

마지막으로 코드는 다음과 같습니다.

<td>
  <v-edit-dialog
  :return-value="props.item.title"
  lazy
  >
    {{ props.item.title }}
    <v-text-field
    slot="input"
    label="Enter New Course Title"
    :value="props.item.title"
    @input="onUpdateCourse({ id: props.item.id, title: props.item.title})"
    single-line
    counter
    @keyup.enter="onUpdateCourse({ id: props.item.id, title: props.item.title})"
    ></v-text-field>
  </v-edit-dialog>
</td>

언급URL : https://stackoverflow.com/questions/49466219/how-do-i-properly-update-vuex-state-from-my-vuetify-data-table