Search code examples
javascriptvue.jsasync-awaitvuexfeathersjs

async await with vuex + feathers


Please check below my code. I'm trying to implement Async Await into vuex. Everything is working but I want to call another action after this one so I am trying with async await But it's not working. In console console.log("after all this" +res) res variable showing undefined.

action.js

import { createUpload } from '../api/index'
export default {
    fetchImageUrl: async({ commit }, reader) => {
      let res = await createUpload({ commit }, reader);
      console.log("after all this" +res)
    }
}

api/index.js

import { feathersClient } from './apiClient'
const uploadService = feathersClient.service('uploads');
export const createUpload = ({commit}, reader) => {
  uploadService
    .create({uri: reader.result})
    .then(function(response){
        commit('setImageUrl', { url: response.imageurl })
        return true;
    });
}

mutations.js

export default {
    setImageUrl: (state,{ url } ) => {
      state.imageUrl = url
    }
}

LeftPanel.vue

const reader  = new FileReader();
export default {
  name: 'left-panel',
  data () {
    return {
      open: true
    }
  },
  methods: {
    uploadFile: function (event) {
      let store = this.$store;
      let file = event.target.files[0];
      reader.readAsDataURL(file);
      reader.onload = function(event) {
        return store.dispatch('fetchImageUrl',reader)
      };
    }
  },
  components: {
    'add-text': AddText
  },
}

Solution

  • Add return statement before uploadService.create.

    index.js

    export const createUpload = ({commit}, reader) => {
      return uploadService
        .create({uri: reader.result})
        ...
    }