Vuex 업데이트 후 하위 구성 요소에서 소품을 강제로 업데이트합니다.

Vuex 업데이트 후 하위 구성 요소에서 소품을 강제로 업데이트합니다.

하위 컴포넌트가 있습니다(<BaseProjectTable>Vuetify를 포함한 내 사이트에서 재사용되는 )<v-data-table>요소.데이터 테이블의 헤더 및 내용 항목은 소품으로 구성 요소에 전달되고 항목 데이터는 상위 항목으로 매핑됩니다.mapGetterVuex 스토어에서요.하위 구성 요소에는 각 행의 편집 기능이 포함되어 있으며,mapActionAPI와 Vuex 데이터를 업데이트하려면 mapGetter가 반응하므로 데이터를 업데이트해야 하며, 따라서 데이터 테이블이 표시됩니다.단, 이것은 동작하지 않습니다.개발 툴을 통해 상태가 정상적으로 갱신되고 있는 것을 알 수 있습니다만, 자 컴포넌트 디스플레이는 동작하지 않습니다.

여기 아이의 관련 부분이 있습니다.<BaseProjectTable>컴포넌트:

<template>
  <div>
    <v-data-table
      show-expand
      :headers="headers"
      :items="filteredItems"
      :search="search"
      tem-key="sow"
      @click:row="rowClick"
      :hide-default-footer="disablePagination"
      dense
      :disable-pagination="disablePagination"
    >
    ...
    </v-data-table>

    ...
    export default {
    name: "BaseProjectTable",
    props: {
      headers: Array,
      items: Array,
      loggedInUser: Object,
      title: String,
      max2chars: v => v.length <= 2 || 'Input too long!',
      editDialog: false,
      showPracticeFilter: {
        default: true,
        type: Boolean
      },
      showSEFilter: {
        default: true,
        type: Boolean
      },
      showStatusFilter: {
        default: true,
        type: Boolean
      },
      projectType: {
        type: String,
        default: 'active'
      },
      disablePagination: {
        type: Boolean,
        default: true
      },
    },
  },
  methods: {
  ...mapActions('projects', {
        saveProject: 'saveProject',
    }), 
    save() {
      // Update API and store with new data.
      this.saveProject({
        projectType: this.projectType,
        projectData: this.editedItem
      })
  },
  computed: {
      statuses()  {
        return this.projectType === 'active' ? this.activeStatuses : this.oppStatuses;
      },
      filteredItems() {
        return this.items.filter(d => {
          return Object.keys(this.filters).every(f => {
            return this.filters[f].length < 1 || this.filters[f].includes(d[f])
          })
        })
      },
    }

부모 컴포넌트의 관련 코드를 다음에 나타냅니다.

<v-card>
  <BaseProjectTable
    :headers="headers"
    :items="activeProjects"
    :loggedInUser="loggedInUser"
    title="Active Projects"
    :disablePagination=false
  ></BaseProjectTable>
</v-card>
...
export default {
  computed: {
    ...mapGetters('projects', {
      activeProjects: 'activeProjects',
      closedProjects: 'closedProjects',
      opportunities: 'opportunities'
    }),
  }
}

그save()메서드는 Vuex 저장소의 데이터를 업데이트하며activeProjectsmap getter (Vue devtools에서 확인했습니다)또,items에서 갱신된 컴포넌트 자체의 값Components탭을 누릅니다.사용 후mapGetters데이터를 반응적으로 만듭니다.자녀 컴포넌트의 데이터도 업데이트될 것으로 예상했지만 그렇지 않습니다.

제가 여기서 본 걸 바탕으로item-key<고객명>님의 특성v-data-table>다음과 같이 합니다.

<v-data-table
  show-expand
  :headers="headers"
  :items="filteredItems"
  :search="search"
  item-key="sow"
  @click:row="rowClick"
  :hide-default-footer="disablePagination"
  dense
  :disable-pagination="disablePagination"
>

(이 컴포넌트를 사용하는 모든 레코드는 고유한 기능을 가지고 있습니다.sow키)는 동작하지 않았습니다.

내가 생각할 수 있는 유일한 생각은 돌연변이의 데이터를 편집하는 것이다.

export const state = () => ({
    active: [],
    closed: [],
    opportunities: [],
})

export const getters = {
  activeProjects: state => state.active,
  closedProjects: state => state.closed,
  opportunities: state => state.opportunities,
}

export const actions = {
  saveProject({ commit }, {projectType, projectData}) {
    commit(types.SAVE_PROJECT, {projectType, projectData});
  }
}

export const mutations = {
  [types.SAVE_PROJECT](state, {projectType, projectData}) {
    // Get project from state list by sow field.
    const index = state[projectType].findIndex(p => p.sow === projectData.sow);
    state[projectType][index] = projectData;
  }
}

전체를 교체하는 것에 비해state[projectType]가치.

업데이트된 값을 표시하려면 데이터 테이블을 어떻게 해야 합니까?

Vue 매뉴얼에서

Vue가 어레이에 대한 다음 변경 사항을 감지할 수 없음

• 인덱스로 항목을 직접 설정하는 경우(예: vm.items[indexOfItem] = newValue)
• 어레이 길이를 수정하는 경우(예: vm.dev.length = newLength)

가지고 있는 것을 다음으로 교환합니다.

import Vue from 'vue'; // this should be at the top level

export const mutations = {
  [types.SAVE_PROJECT](state, {projectType, projectData}) {
    // Get project from state list by sow field.
    const index = state[projectType].findIndex(p => p.sow === projectData.sow);
    Vue.set(state[projectType], index, projectData)
  }
}

그 후 어레이의 변경이 검출되어 getter가 정상적으로 동작합니다.

언급URL : https://stackoverflow.com/questions/63516222/force-props-to-update-in-child-component-after-vuex-update