1

我有以下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使用可拖动库来编辑 的值，但 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')
        }
      },
4

1 回答 1

1

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

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 上的响应式突变）：

mutations: {
  setImageData(state:any, infopackImageData: any) {
    state.infoPackCreationTab = {
      ...state.infoPackCreationTab,
      infopackContents: state.infoPackCreationTab.infopackContents.filter(...)
    };
于 2021-03-24T16:55:52.397 回答