How can I upload file using vuex store on the vue component?

问题

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?

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

回答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.