如何在vue组件上使用vuex存储上载文件? [英] How can I upload file using vuex store on the vue component?

问题描述

如果我在vue组件中使用ajax这样的话:

If I using ajax in vue component like this :

有效.我成功获取了文件

It works. I successfully get the file

但是在这里我想使用vuex存储

But here I want to using vuex store

我的vuex存储模式如下:

My pattern of vuex store like this :

我这样更改我的vue组件:

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>

在组件vue中，它将在模块用户中调用updateProfile方法

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

这样的模块用户:

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
}

在模块用户中，它将在api用户中调用updateProfile方法

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

像这样的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))
  }
}

所以我的模式是这样的.所以我正在使用Vuex存储模式

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

如果我console.log(user)在模块用户的updateProfile方法中，则结果为undefined

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

如何使用vuex存储发送文件数据?

How can I send file data using vuex store?

推荐答案

因此，如果我使用 Vuex ，而我使用 Store.帮你.如果您遇到问题，我将首先尝试存储类似字符串的内容，因为它是文件还是字符串，因此存储功能应该无关紧要.一旦设置了字符串，然后移至文件(blob，string或arr等等...).

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具有出色的文档，尽管事情仍然很棘手，但阅读一本法律法规并提供参考书就很好. 此处

Vue has great docs, though things still can be tricky, its good read a lil and have a reference. Here

我使用Vuex.Store

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

这样可以保存状态. Vue最酷的是，Vue提供了一个存储变量，您可以通过传递到Vue实例在组件中进行设置:

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,

然后您可以通过调用this.$ store进行引用.稍后，您可以使用this.$ store.getters.file检索文件var.您可以在此处停止(调用this.$ store.commit)，但请注意，我们此处未使用操作.您可以添加在设置和变异状态之间添加另一层的动作.

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.

有关它们的更多信息此处

如果您想使用操作，请在您要保存数据的位置添加类似这样的内容

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

所以Store.dispatch('SAVE_FILE'，{value:file})

so Store.dispatch('SAVE_FILE',{value:file})

希望有帮助

这篇关于如何在vue组件上使用vuex存储上载文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！