0

如果我像这样在 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中，它会调用modules user中的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 商店的模式

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

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

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

4

2 回答 2

2

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

Vue 有很棒的文档，虽然事情仍然很棘手，但它很好地阅读了 lil 并有参考。这里

我使用 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}
        );
    }

  }

并且您使用 dispatch 在 Store 上调用操作

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

希望这会有所帮助

于 2018-03-17T00:22:12.700 回答
0

问题在于这一行：

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

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

只需传递user属性：

this.updateProfile({ user: formData, reload: true });
于 2018-03-14T13:12:28.770 回答