Question

我在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, 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
    },

Answer 1

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

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

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

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

1 个答案: