[英]How can I upload file using vuex store on the vue component?
If I using ajax in vue component like this : 如果我在vue组件中使用ajax像这样:
It works. 有用。 I successfully get the file
我成功获取文件
But here I want to using vuex store 但是在这里我想使用vuex存储
My pattern of vuex store like this : 我的vuex商店模式如下:
I change my vue component like this : 我像这样更改vue组件:
<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 在组件vue中,它将在模块用户中调用updateProfile方法
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 从模块用户,它将在api用户中调用updateProfile方法
The api users like this : 像这样的api用户:
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
所以我正在使用Vuex存储模式
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
如果我在模块用户上的updateProfile方法中使用
console.log(user)
,则结果undefined
How can I send file data using vuex store? 如何使用vuex存储发送文件数据?
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
. updateProfile
操作期望接收带有user
和reload
属性的对象,但是您传递的是formData
属性而不是user
。
Simply pass the user
property instead: 只需传递
user
属性即可:
this.updateProfile({ user: formData, reload: true });
So if Im using Vuex I use Store. 因此,如果我使用Vuex ,则使用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... ).
设置完字符串后,请移至文件(blob,string或arr等等)。
Vue has great docs, though things still can be tricky, its good read a lil and have a reference. Vue有很棒的文档,尽管事情仍然很棘手,但阅读一本法律法规并提供参考书就很好。 Here
这里
I use Vuex.Store 我使用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:
Vue最酷的是,您可以通过传递给Vue实例,在组件中设置一个存储变量:
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 . 然后,您可以通过调用this。$ store进行引用。 later you can use this.$store.getters.file to retrieve the file var.
稍后,您可以使用this。$ store.getters.file检索文件var。 You can stop there (call this.$store.commit) , but note we are not using actions here .
您可以在此处停止(调用this。$ store.commit),但请注意,我们此处未使用操作。 You can add actions which add another layer between setting and mutating state.
您可以添加操作,以在设置和变异状态之间添加另一层。
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}) 因此Store.dispatch('SAVE_FILE',{value:file})
hopefully that helps 希望有帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.