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

如何解决VueX和axios发布以前的数据以及来自新请求的数据

我在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后端和数据库中。我遇到的问题是，在我发布第一篇文章后，它发布了以前的数据和新数据，但我不知道为什么要这样做。我确实将await添加到axios调用中，但这只是减慢了它的速度，它仍然在第一次发布之后两次发布，并且确定如果我继续发布它，它将继续将先前的发布一次又一次地发布到db中。我对所发生的事情不知所措，因此伸出援手寻求帮助，看看我能否解决此问题。

数据库中的外观示例

有人对我有任何建议，以便我可以解决此问题吗？我一次只能发布一件符合预期结果的物品。我已经检查了输入内容，并输入.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;
     },

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

 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,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',headers: { 'Content-Type': undefined }
           })
           .then(function(response) {
               console.warn(response);
           })
           .catch(function(response) {
               console.warn(response);
           });
   }
  }
};

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

const assetProcessing = {
  namespaced: true,state: {
    currentAsset: {
      id: 0,name: '',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,detail: {
          category: '',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
    },

解决方法

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

http://localhost:4200/employee/enrollments?number=189930097&city=Chicago

到AssetAdd.vue组件，它消除了过多的资产过账。我要感谢@phil在此方面的帮助。

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

如何解决VueX和axios发布以前的数据以及来自新请求的数据

解决方法

相关推荐