vuex에서 반응하지 않는 getter

vuex에서 반응하지 않는 getter

팔로워가 있다store정의:

 state: () => ({
    infoPackCreationData: null,
    infoPackCreationTab: null,
  }),
getters: {
  infoPackImage(state: any) {
      return state.infoPackCreationTab && state.infoPackCreationTab.infopackContents
        ? state.infoPackCreationTab.infopackContents.filter((item: any) => item.type === "IMAGE")
        : [];
    }
},
mutations: {
  setImageData(state:any, infopackImageData: any) {
      state.infoPackCreationTab.infopackContents.filter((item: any) => {if(item.type === "IMAGE")
      item = infopackImageData
        console.log(item , 'this is items');
      return item})
    }
},
 actions: {
    setImageData(context: any, payload: any) {
      context.commit('setImageData', payload)
    }
}

내 컴포넌트에서는,computed을 손에 넣다imageList:

  computed: {
      ...mapGetters("creationStore", ["infoPackImage"]),
      imageList: {
        get() {
          return this.infoPackImage ?? [];
        },
        set(value) {
         this.$store.dispatch('creationStore/setImageData', value);
        }
      }
    },

문제는 이 값을 편집하고 싶다는 것입니다.imageList타고index드래그 가능한 libarary를 사용하지만 imageList는 반응하지 않고 이미지를 이동할 뿐 이전 인덱스의 다른 이미지는 표시하지 않습니다.

  async imageChange(e) {
        this.loading = true
        let newIndex = e.moved.newIndex;
        let prevOrder = this.imageList[newIndex - 1]?.order ?? 0
        let nextOrder = this.imageList[newIndex + 1]?.order ?? 0
        const changeImageOrder = new InfopackImageService();
        try {
          return await changeImageOrder.putImageApi(this.$route.params.infopackId,
            this.$route.params.tabId,
            e.moved.element.id, {
              title: e.moved.element.title,
              infopackAssetRef: e.moved.element.infopackAssetRef,
              order: nextOrder,
              previousOrder: prevOrder,
            }).then((res) => {
            let image = {}
            let infopackAsset = e.moved.element.infopackAsset
            image = {...res, infopackAsset};
            Vue.set(this.imageList, newIndex , image)
            this.loading = false
            return this.imageList
          });
        } catch (e) {
          console.log(e, 'this is put error for tab change')
        }
      },

Array.protype.필터는 어레이를 인플레이스 상태로 수정하지 않고 새 어레이를 반환합니다.그래서 이 돌연변이는 어떤 상태도 바꾸지 않습니다.

mutations: {
  setImageData(state:any, infopackImageData: any) {
      state.infoPackCreationTab.infopackContents.filter((item: any) => {if(item.type === "IMAGE")
      item = infopackImageData
        console.log(item , 'this is items');
      return item})
    }
},

그래서, 만약 당신이 바꿀 생각이 있다면state.infoPackCreationTab.infopackContentsfilter()의 결과를 할당해야 합니다.

mutations: {
  setImageData(state:any, infopackImageData: any) {
      state.infoPackCreationTab.infopackContents = state.infoPackCreationTab.infopackContents.filter(...)

하지만, 그 이후로는state.infoPackCreationTab가지고 있지 않았다infopackContents초기화 시 Vue.set()을 사용하거나 전체를 바꾸지 않으면 반응하지 않습니다.infoPackCreationTab새 개체(반응성 돌연변이에 대한 Vuex 참조):

mutations: {
  setImageData(state:any, infopackImageData: any) {
    state.infoPackCreationTab = {
      ...state.infoPackCreationTab,
      infopackContents: state.infoPackCreationTab.infopackContents.filter(...)
    };

언급URL : https://stackoverflow.com/questions/66441246/getters-not-reactive-in-vuex