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);
        }
      }
    },

问题是我想使用可拖动的库编辑 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')
        }
      },

Answer 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() 或只是替换整个 {带有新对象的 {1}} 对象（请参阅：Vuex on reactive mutations）：

infoPackCreationTab

吸气剂在 vuex 中没有反应

1 个答案: