VueX 和 axios 发布以前的数据以及来自新请求的数据答案

【问题标题】：VueX and axios posting previous data along with data from new requestVueX 和 axios 发布以前的数据以及来自新请求的数据
【发布时间】：2020-08-12 00:09:26
【问题描述】：

我的 vuex 商店中有一个 postAsset 操作，就像这样

async postAsset({dispatch}, asset) {

  const f = await dispatch('srcToFile', asset);
  asset[0].files.fileList = f;
  const fileData = asset[0].files.fileList;
  const detailData = asset[0].detail;

  const fData = new FormData();
  fData.append('Name', asset[0].name);
  Object.keys(detailData).forEach((key) => {
    fData.append(`Detail.${key}`, detailData[key]);
  });
  for (var i = 0; i < fileData.length; i++) {
    fData.append('Files', fileData[i]);
  }
  await axios({
      method: 'post',
      url: 'https://localhost:5001/api/Assets',
      data: fData,
      headers: {
        'Content-Type': undefined
      }
    })
    .then(function(response) {
      console.warn(response);
    })
    .catch(function(response) {
      console.warn(response);
    });
}

它已成功发布到我的 api 后端和数据库。我遇到的问题是，在我发布第一篇文章后，它发布了以前的数据和新数据，我不知道它为什么这样做。我确实在 axios 调用中添加了 await ，但这只是减慢了它的速度，它在第一次之后仍然发布了两次，我确定如果我继续发布它会继续一次又一次地将以前的发布到数据库中。我不知道发生了什么，所以寻求一些帮助，看看我能不能解决这个问题。

它在数据库中的外观示例

有没有人对我有任何建议，以便我可以解决这个问题？我应该一次只发布一个项目，这是预期的结果。我已经完成了我的输入并输入了 .prevent 以阻止它们单击两次，但我不认为是这样 .. 这就像每次添加新记录时都会保存数据并重新发布所有数据一样。

更新：

调用动作的代码

populateAssets ({ dispatch }, asset) {
  return new Promise((resolve) => {
  assets.forEach((asset) => {
  commit('createAsset', asset);
 );
dispatch('postAsset', asset);
resolve(true);
});
    },

填充资产使用已完成的资产填充列表。

并且资产来自 srcToFile 方法将文件转换为我可以发布的 blob

async srcToFile(context, asset) {
          const files = asset[0].files.fileList;
          let pmsArray = [];
          for (let f = 0; f < files.length; f++) {
              var data = files[f].data;
              let name = files[f].name;
              let mimeType = files[f].type;

             await fetch(data)
                  .then(function(res) {
                      const r = res.arrayBuffer();
                      console.warn('resource ', r);
                      return r;
                  })
                  .then(function(buf) {
                      console.warn('buffer: ', [buf]);
                      let file = new File([buf], name, { type: mimeType });
                      pmsArray.push(file);
                  });
          }
         console.warn(pmsArray);
         return pmsArray;
     },

asset 是我添加资产组件中的一个数组资产结构

 name: '',
      detail: {
        category: '',
        manufacturer: '',
        model: '',
        serialNumber: '',
        purchasePlace: '',
        quantity: 1,
        acquiredDate: '',
        purchasePrice: '',
        currentValue: '',
        condition: '',
        assetLocation: '',
        retiredDate: '',
        description: ''
      },
      files: {
        fileList: []
      }

希望这有助于一些整个商店文件

import Vue from 'vue'
import Vuex from 'vuex'
import { states } from '../components/enums/enums'
import { getField, updateField } from 'vuex-map-fields'
import axios from 'axios'


Vue.use(Vuex);
const inventory = {
  namespaced: true,
  strict: true,
  state: {
    assets: {
      items: []
    },
    categories: [],
    manufacturers: [],
    assetLocations: [],
    conditions: ['New', 'Fair', 'Good', 'Poor']
  },
  getters: {
    assetItems: state => state.assets.items,
    getAssetById: (state) => (id) => {
        return state.assets.items.find(i => i.id === id);
    },
    conditions: (state) => state.conditions,
    categories: (state) => state.categories,
    manufacturers: (state) => state.manufacturers,
    assetLocations: (state) => state.assetLocations
  },
  mutations: {
    createAsset (state, assets) {
        state.assets.items.push(assets);
    },
    createCategories (state, category) {
        state.categories.push(category);
    },
    createManufacturers (state, manufacturer) {
        state.manufacturers.push(manufacturer);
    },
    createLocations (state, locations) {
        state.assetLocations.push(locations);
    }
  },
  actions: {
    addToCategories ({ commit }, categories) {
        commit('createCategories', categories);
    },
    addToManufacturers ({ commit }, manufacturers) {
        commit('createManufacturers', manufacturers);
    },
    addToLocations ({ commit }, locations) {
        commit('createLocations', locations);
    },
    populateAssets ({ dispatch }, asset) {
        //return new Promise((resolve) => {
//        assets.forEach((asset) => {
//          commit('createAsset', asset);
//        });
            dispatch('postAsset', asset);
        //    resolve(true);
        //});
    },
    addAsset ({ dispatch, /*getters*/ }, newAsset) {
        //let assetCount = getters.assetItems.length;
        //newAsset.id = assetCount === 0
        //    ? 1
        //    : assetCount++;
        dispatch('populateAssets', [newAsset]);
    },
     async srcToFile(context, asset) {
          const files = asset[0].files.fileList;
          let pmsArray = [];
          for (let f = 0; f < files.length; f++) {
              var data = files[f].data;
              let name = files[f].name;
              let mimeType = files[f].type;

             await fetch(data)
                  .then(function(res) {
                      const r = res.arrayBuffer();
                      console.warn('resource ', r);
                      return r;
                  })
                  .then(function(buf) {
                      console.warn('buffer: ', [buf]);
                      let file = new File([buf], name, { type: mimeType });
                      pmsArray.push(file);
                  });
          }
         console.warn(pmsArray);
         return pmsArray;
     },
   async postAsset({ dispatch }, asset) {
       const f = await dispatch('srcToFile', asset);
       asset[0].files.fileList = f;
       const fileData = asset[0].files.fileList;
       const detailData = asset[0].detail;

       const fData = new FormData();
       fData.append('Name', asset[0].name);
        Object.keys(detailData).forEach((key) => {
            fData.append(`Detail.${key}`, detailData[key]);
        });
       for (var i = 0; i < fileData.length; i++) {
           fData.append('Files', fileData[i]);
       }
     await axios({
               method: 'post',
               url: 'https://localhost:5001/api/Assets',
               data: fData,
               headers: { 'Content-Type': undefined }
           })
           .then(function(response) {
               console.warn(response);
           })
           .catch(function(response) {
               console.warn(response);
           });
   }
  }
};

const maintenance = {
  state: {
    backup: []
  },
  strict: true,
  getters: {},
  mutations: {},
  actions: {}
};

const assetProcessing = {
  namespaced: true,
  state: {
    currentAsset: {
      id: 0,
      name: '',
      detail: {
        category: '',
        manufacturer: '',
        model: '',
        serialNumber: '',
        purchasePlace: '',
        quantity: 1,
        acquiredDate: '',
        purchasePrice: '',
        currentValue: '',
        condition: '',
        assetLocation: '',
        retiredDate: '',
        description: ''
      },
      files: {
        fileList: []
      }
    },
    filePosition: -1,
    selectedItem: -1,
    state: states.view,
    isNewAsset: false
  },
  getters: {
    getField,
    getOpenAsset (state) {
      return state.currentAsset
    },
    getSelectedAsset: (state, getters, rootState, rootGetters) => (id) => {
      if (state.isNewAsset) return state.currentAsset
      Object.assign(state.currentAsset, JSON.parse(JSON.stringify(rootGetters['inventory/getAssetById'](!id ? 0 : id))));
      return state.currentAsset
    },
    appState: (state) => state.state,
    getCurrentPosition (state) {
      return state.filePosition
    },
    selectedAssetId: (state) => state.selectedItem
  },
  mutations: {
    updateField,
    setAsset (state, asset) {
      Object.assign(state.currentAsset, asset)
    },
    setFiles (state, files) {
      Object.assign(state.currentAsset.files, files)
    },
    newAsset (state) {
      Object.assign(state.isNewAsset, true)
      Object.assign(state.currentAsset, {
        id: 0,
        name: '',
        detail: {
          category: '',
          manufacturer: '',
          model: '',
          serialNumber: '',
          purchasePlace: '',
          quantity: 1,
          acquiredDate: '',
          purchasePrice: '',
          currentValue: '',
          condition: '',
          assetLocation: '',
          retiredDate: '',
          description: ''
        },
        files: {
          fileList: []
        }
      })
    },
    updateSelectedItem (state, id) {
        Vue.set(state, 'selectedItem', id);
    },
    updateState (state, newState) {
        Vue.set(state, 'state', newState);
    }
  },
  actions: {}
};

export const store = new Vuex.Store({
  modules: {
    inventory: inventory,
    maintenance: maintenance,
    assetProcessing
  }
})

当用户点击表单上的保存按钮时调用添加资产

addAsset () {
      this.$store.dispatch('inventory/addAsset', this.newAsset) <--- this calls add asset
      this.$store.commit('assetProcessing/updateState', states.view);<-- this closes the window
    },

【问题讨论】：

您能补充一下您是如何“调用”该操作的吗？
在不知道 1. 您如何调度此操作的情况下无法调试此操作。 2. asset 是什么，以及 3. 你的服务器端代码对 multipart/form-data 请求有效负载做了什么
如果您查看浏览器的 Network 控制台，我怀疑您会看到多个请求，这意味着您正在多次分派此操作。您问题中的代码很可能与您的问题无关
我可以把整个店铺文件贴出来看看能不能缩小范围？
也发布了我的服务器端代码。

标签： vuejs2 axios vuex

【解决方案1】：

所以经过大量调试后，我们发现事件总线多次触发，导致我们添加的帖子过多

beforeDestroy() {
            eventBus.$off('passAssetToBeSaved');
            eventBus.$off('updateAddActionBar');
        },

到 AssetAdd.vue 组件，它消除了资产的过度发布。我要感谢 @phil 在这方面帮助我。

【讨论】：