吸气剂在 vuex 中没有反应

Question

我定义了以下 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);
        }
      }
    },

问题是我想使用可拖动库通过 index 编辑 imageList 的值，但是 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')
        }
      },

Answer 1

Array.prototype.filter 不会就地修改数组，它 returns 是一个新数组。所以这个突变永远不会改变任何状态：

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.infopackContents，则需要分配 filter() 的结果：

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

但是，由于state.infoPackCreationTab在初始化时没有infopackContents属性，除非你使用Vue.set() 或者只是用一个新对象替换整个 infoPackCreationTab 对象（参见：Vuex on reactive mutations）：

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

吸气剂在 vuex 中没有反应

getters not reactive in vuex

getter

store

vuex

reactive

vuedraggable