How to upload file using vuex store in vue component?
If i use ajax in vue component like this:
<template>
<div>
...
</div>
</template>
<script>
export default {
methods: {
submitForm() {
...
formData.append('file', files)
axios.post(this.baseUrl+'/member/profile/update',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function(response) {
console.log('success')
})
.catch(function(error) {
console.log('fail')
})
}
}
}
</script>
It works. I successfully receive the file
But here I want to use vuex store
My vuex template is stored like this:
I am modifying 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 vue component, it will call updateProfile method in user modules
Module users like the following:
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 module user it will call updateProfile method on api users
Api users:
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 template. So I am using the vuex store template
My problem is here, I am still confused to send file data
If I am console.log(user)
in the updateProfile method for module users, the result isundefined
How can I send file data using vuex store?
source to share
The problem with this line:
this.updateProfile({formData, reload: true})
The action updateProfile
expects to receive an object with properties user
and reload
, but you pass the property formData
instead user
.
Just pass the property user
:
this.updateProfile({ user: formData, reload: true });
source to share
So if Im using Vuex , I am using Store. ... If this is not your intention, then this answer may not help you. If you run into problems, I would first try to store something like a string, because the store function shouldn't matter to save a file or string. Once the string is set up, navigate to the file (blob, string or arr any ...).
Vue has large docs, although it can still be tricky, good to read lil and have a link. Here
I am using Vuex.Store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
then define your store 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 this way
Store.commit(
'SET_FILE',
{value:yourfile}
);
This saves a fortune. The great thing is that Vue gives you a store variable that you can set in the component by navigating 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. you can use this later. $ store.getters.file to retrieve var file. You can stop there (call it. $ Store.commit), but note that we're not using actions here. You can add actions that add another layer between customization and state change.
more about 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 in the store
so Store.dispatch ('SAVE_FILE', {value: file})
hope it helps
source to share