[Vuejs]-How can I upload file using vuex store on the vue component?

by

2👍

So if Im using Vuex I use Store. If you dont intend to then this answer may not help you. If you are running into issues I would first try storing something like a string because wether its a file or a string, the store functionality should not matter. Once a string is setup , then move to a file (blob , string or arr whatever… ).

Vue has great docs, though things still can be tricky, its good read a lil and have a reference. Here

I use Vuex.Store 

  import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex)

then define your store up like this:

     const Store = new Vuex.Store({
      state: {


        file:null //any set of state vars can be added her x number of states


      },
    //define your getters
      getters:{
        file: state =>  { return state.file},

      },
    //your mutations to change data
      mutations: {

        SET_FILE(state,payload){
            state.file = payload.value;
        },

      },
//actions to take to commit data 
      actions:{
        //tbd here you can do actions and further manipulate data before committing 
      }
    })

    export default Store;

now you can save your file like so

Store.commit(
            'SET_FILE',
            {value:yourfile}
        );

That saves the state. Whats cool is Vue gives you a store variable you can set in the component by passing to the Vue instance: 

import Store from ../Globals/Store

const app = new Vue({
  el: '#app',
  // provide the store using the "store" option.
  // this will inject the store instance to all child components.
  store:Store,

Then you can reference by calling this.$store . later you can use this.$store.getters.file to retrieve the file var. You can stop there (call this.$store.commit) , but note we are not using actions here . You can add actions which add another layer between setting and mutating state.

more on them here

if you want to use actions add something like this where you commit to save the data

actions:{

    SAVE_FILE ( {commit} ,payload) {
        commit(
            'SET_FILE',
            {value:payload.value}
        );
    }

  }

and you use dispatch to call an action on a Store

so Store.dispatch(‘SAVE_FILE’,{value:file})

hopefully that helps

👤yeahdixon

0👍

The issue is with this line: 

this.updateProfile({formData, reload: true})

The updateProfile action is expecting to receive an object with user and reload properties, but you are passing a formData property instead of user.

Simply pass the user property instead:

this.updateProfile({ user: formData, reload: true });
👤thanksd

Leave a comment