Как я могу загрузить файл, используя vuex store для компонента vue?

Question

Если я использую AJAX в компонент VUE, как это:

Оно работает. Я успешно получил файл

Но здесь я хочу использовать vuex store

Мой шаблон магазина Vuex выглядит так:

Я изменяю свой компонент Vue, как это:

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

В компоненте vue он вызовет метод updateProfile в модуле 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
}

От пользователя модулей он будет вызывать метод updateProfile у пользователей API

Пользователи 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 store?

Answer 1

Так что, если я использую 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,

Тогда вы можете ссылаться, называя это.$ Store. позже вы можете использовать этот.$store.getters.file для получения файла var. Вы можете остановиться на этом (позвоните по этому адресу.$ Store.commit), но учтите, что здесь мы не используем действия. Вы можете добавить действия, которые добавляют еще один слой между установкой и изменением состояния.

подробнее о них здесь

если вы хотите использовать действия, добавьте что-то вроде этого, где вы обязуетесь сохранять данные

actions:{

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

  }

и вы используете диспетчеризацию для вызова действия в магазине

так Store.dispatch('SAVE_FILE',{значение: файл})

надеюсь, это поможет

Answer 2

Проблема с этой строкой:

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

updateProfile действие ожидает получить объект с user а также reload свойства, но вы передаете formData собственность вместо user,

Просто передать user свойство вместо:

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