如何使用vue组件上的vuex存储上载文件？

Question

如果我在vue组件中使用ajax像这样：

有用。 我成功获取文件

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

我的vuex商店模式如下：

我像这样更改vue组件：

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

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

模块用户是这样的：

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方法

像这样的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存储模式

我的问题是我仍然困惑于发送文件数据

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

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

Answer 1

问题在于此行：

this.updateProfile({formData, reload: true})

updateProfile操作期望接收带有user和reload属性的对象，但是您传递的是formData属性而不是user 。

只需传递user属性即可：

this.updateProfile({ user: formData, reload: true });

Answer 2

因此，如果我使用Vuex ，则使用Store。 如果您不打算这样做，那么此答案可能对您没有帮助。 如果遇到问题，我将首先尝试存储类似字符串的内容，因为它是文件还是字符串，所以存储功能应该无关紧要。 设置完字符串后，请移至文件（blob，string或arr等等）。

Vue有很棒的文档，尽管事情仍然很棘手，但阅读一本法律法规并提供参考书就很好。 这里

我使用Vuex.Store

  import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex) 

然后像这样定义您的商店：

     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;

现在您可以像这样保存文件

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

这样可以保存状态。 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,

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

在这里更多关于他们

如果您想使用操作，请在您要保存数据的位置添加如下所示的内容

actions:{

    SAVE_FILE ( {commit} ,payload) {
        commit(
            'SET_FILE',
            {value:payload.value}
        );
    }

  }

然后使用分派在商店上调用操作

因此Store.dispatch（'SAVE_FILE'，{value：file}）

希望有帮助