How can I upload file using vuex store on the vue

Question

If I using ajax in vue component like this :

It works. I successfully get the file

But here I want to using vuex store

My pattern of vuex store like this :

I change my vue component like this :

<template>
        <div>
            ...
        </div>
    </template>
    <script>
        export default {
            methods: {
                submitForm() {
                    ...
                    formData.append('file', files)
                    this.updateProfile({formData, reload: true})
                }
            }
        }
    </script>

In the component vue, it will call updateProfile method in modules user

The modules user like this :

import { set } from 'vue'
import users from '../../api/users'
import * as types from '../mutation-types'
// initial state
const state = {
    addStatus:null
}
// getters
const getters = {
    updateProfileStatus: state =>  state.addStatus,
}
// actions
const actions = {
    updateProfile ({ dispatch,commit,state },{user,reload})
    {
        users.updateProfile(user,
            response => {
                commit(types.UPDATE_PROFILE_SUCCESS)
            },
            errors => {
                commit(types.UPDATE_PROFILE_FAILURE)
            }
        )
    }
}
// mutations
const mutations = {
    [types.UPDATE_PROFILE_SUCCESS] (state){
        state.addStatus = 'success'
    },
    [types.UPDATE_PROFILE_FAILURE] (state){
        state.addStatus = 'failure'
    }
}
export default {
    state,
    getters,
    actions,
    mutations
}

From the modules user, it will call updateProfile method in api users

The api users like this :

import Vue from 'vue'

export default {

  updateProfile(user, cb, ecb = null) {
    axios.post('/member/profile/update', user)
      .then(response => cb(response))
      .catch(error => ecb(error))
  }
}

So my pattern like that. So i'm using pattern of vuex store

My problem here is I'm still confused to send file data

If I console.log(user) in the updateProfile method on modules user, the result is undefined

How can I send file data using vuex store?

Answer 1

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

Answer 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