Vuejs 更新另一个函数内部的状态

Question

I'm new to Vue.js and wanted to know how we can update the state of the component inside another function that is coming from another file. I have a simple form that only has an input file element.

When the user will select the file then the onChange handler will trigger but I don't know how to update the state inside other functions.

Code:

utils.js:

export const handleUpload = function(event, state) {
    console.log('Selected file: ', event.target.files[0]);
    // Update the selected state.
};

Component:

<template>
  <div>
    <input
      type="file"
      accept="image/*"
      name="photo"
      @change="onFileSelection($event)"
    />
  </div>
</template>

<script>
import { handleUpload } from './utils';

export default {
  name: 'Index',
  date() {
    return {
      selected: null
    };
  },
  methods: {
    onFileSelection: handleUpload
  }
};
</script>

Answer 1

There are several ways to do it.

Keep handleUpload generic and simply let it return data

You can, for example, let handleUpload return something that your VueJS component will use to work on further. This is so that handleUpload remains truly generic and does not contain any component-specific logic, since mutating a state is something specific to a component.

export const handleUpload = function(event) {
    console.log('Selected file: ', event.target.files[0]);
    
    return event.target.files[0];
};

Then in your VueJS component:

data() {
    return {
        selected: null
    };
},
methods: {
    onFileSelection: function(event) {
        const file = handleUpload(event);
        // Then you can change your component state here, e.g.
        this.selected = file;
    }
}

Pass component into function (not recommended)

This is possible but personally I would avoid it, because it makes handleUpload opiniated (ie it needs to know what specific component data to change, and that may be different from one component to another).

export const handleUpload = function(event, component) {
    console.log('Selected file: ', event.target.files[0]);
    
    component.selected = event.target.files[0];'
};

Then in your VueJS component:

data() {
    return {
        selected: null
    };
},
methods: {
    onFileSelection: function(event) {
        handleUpload(event, this);
    }
}