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

我的vuex商店中有一个postAsset操作，如下所示

async postAsset（{dispatch}，asset）{
常数f=等待分派（'srcToFile'，资产）；
资产[0].files.fileList=f；
const fileData=asset[0]。files.fileList；
const detailData=asset[0]。详细信息；
const fData=新表单数据（）；
fData.append（'Name'，资产[0].Name）；
Object.keys（detailData）.forEach（（key）=>{
append（`Detail.${key}`，detailData[key]）；
});
对于（var i=0；i

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

它在数据库中的外观示例

有没有人能给我一些建议，让我把这个修好？我应该只得到一个项目张贴在同一时间是理想的结果。我已经检查了我的输入并输入了。防止他们点击两次，但我认为不是那样的。。这就像每次我添加一条新记录时，它都会保存数据并立即重新发布

更新：

调用操作的代码

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

希望这能帮上忙 整个商店的档案

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

从“Vue”导入Vue
从“Vuex”导入Vuex
从“../components/enums/enums”导入{states}
从“vuex映射字段”导入{getField，updateField}
从“axios”导入axios
Vue.use（Vuex）；
常量库存={
名称空间：对，
严格：是的，
声明：{
资产：{
项目：[]
},
类别：[]，
制造商：[]，
资产位置：[]，
条件：[“新的”、“一般的”、“好的”、“差的”]
},
吸气剂：{
assetItems:state=>state.assets.items，
getAssetById:（状态）=>（id）=>{
返回state.assets.items.find（i=>i.id==id）；
},
条件：（状态）=>state.conditions，
类别：（state）=>state.categories，
制造商：（州）=>state.manufacturers，
assetLocations：（状态）=>state.assetLocations
},
突变：{
createAsset（状态、资产）{
状态。资产。项目。推送（资产）；
},
createCategories（状态、类别）{
state.categories.push（类别）；
},
创建制造商（州、制造商）{
state.manufacturers.push（制造商）；
},
createLocations（状态、位置）{
状态。资产位置。推送（位置）；
}
},
行动：{
addToCategories（{commit}，类别）{
提交（'createCategories'，categories）；
},
添加到制造商（{commit}，制造商）{
提交（“创建制造商”，制造商）；
},
addToLocations（{commit}，位置）{
提交（“创建位置”，位置）；
},
populateAssets（{dispatch}，asset）{
//返回新承诺（（解决）=>{
//资产。forEach（（资产）=>{
//提交（'createAsset'，资产）；
//        });
派送（“邮资”、资产）；
//决心（正确）；
//});
},
addAsset（{dispatch，/*getters*/}，newAsset）{
//让assetCount=getters.assetItems.length；
//newAsset.id=assetCount==0
//    ? 1
//：assetCount++；
分派（'PopulateSets'，[newAsset]）；
},
异步srcToFile（上下文、资源）{
const files=asset[0]。files.fileList；
设pmsArray=[]；
for（设f=0；f{
append（`Detail.${key}`，detailData[key]）；
});
对于（var i=0；iimport 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
    },

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