If I using ajax in vue ponent 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 ponent like this :

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

If I using ajax in vue ponent 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 ponent like this :

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

In the ponent 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,mit,state },{user,reload})
    {
        users.updateProfile(user,
            response => {
                mit(types.UPDATE_PROFILE_SUCCESS)
            },
            errors => {
                mit(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?

• javascript
• vue.js
• vue-ponent
• vuex
• vuex-modules

Share Improve this question Follow edited Oct 12, 2018 at 12:57 Varun 4,4522222 gold badges9191 silver badges120120 bronze badges asked Mar 14, 2018 at 6:44 moses tohmoses toh 13.2k8181 gold badges265265 silver badges459459 bronze badges 1

• i think if we use vuex to upload image using FormData object it will get an error in payload max size 'Payload content length greater than maximum allowed: 1048576' – Kalanka Commented Jun 12, 2018 at 4:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 mit data 
      actions:{
        //tbd here you can do actions and further manipulate data before mitting 
      }
    })

    export default Store;

now you can save your file like so

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

That saves the state. Whats cool is Vue gives you a store variable you can set in the ponent 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 ponents.
  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.mit) , 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 mit to save the data

actions:{

    SAVE_FILE ( {mit} ,payload) {
        mit(
            '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

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