Question

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

有效。我成功获取了文件

但在这里我想使用vuex商店

我的vuex商店模式如下：

我改变了我的vue组件：

＆＃13;

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

＆＃13;

在组件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'

＆＃13;

export default {

  updateProfile(user, cb, ecb = null) {
    axios.post('/member/profile/update', user)
      .then(response => cb(response))
      .catch(error => ecb(error))
  }
}

＆＃13;

所以我的模式就是这样。所以我使用的是vuex商店模式

我的问题是我仍然对发送文件数据感到困惑

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

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

Answer 1

问题在于这一行：

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

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

只需传递user属性：

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

Answer 2

因此，如果我使用 Vuex ，我会使用商店。如果您不打算这么回答可能对您没有帮助。如果你遇到问题，我会首先尝试存储类似字符串的东西，因为它是一个文件或字符串，商店功能应该无关紧要。一旦设置了字符串，然后移动到文件（blob，字符串或arr等等......）。

Vue有很棒的文档，虽然事情仍然很棘手，但它很好读并且有参考。 Here

我使用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,

然后你可以通过调用这个。$ store来引用。稍后您可以使用此。$ store.getters.file来检索文件var。你可以在那里停下来（打电话给。$ store.commit），但请注意我们这里没有使用动作。您可以添加在设置和变异状态之间添加另一个图层的操作。

更多关于他们here

如果要使用操作，请在提交保存数据的地方添加类似的内容

actions:{

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

  }

并使用dispatch在商店中调用操作

所以Store.dispatch（＆＃39; SAVE_FILE＆＃39;，{value：file}）

希望有帮助

如何在vue组件上使用vuex store上传文件？

2 个答案: