时间戳

首页 > 解决方案 > Vuejs 更新另一个函数内部的状态

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

问题描述

我是 Vue.js 的新手，想知道我们如何在来自另一个文件的另一个函数中更新组件的状态。我有一个简单的表单，只有一个输入文件元素。

当用户选择文件时，onChange 处理程序将触发，但我不知道如何更新其他函数中的状态。

代码：

实用程序.js：

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

零件：

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

标签： javascriptvue.js

解决方案

有几种方法可以做到这一点。

保持handleUpload通用并简单地让它返回数据

例如，您可以让handleUpload返回一些您的 VueJS 组件将用于进一步处理的内容。这是为了handleUpload保持真正的通用性并且不包含任何特定于组件的逻辑，因为改变状态是特定于组件的东西。

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

然后在你的 VueJS 组件中：

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;
    }
}

将组件传递给函数（不推荐）

这是可能的，但我个人会避免它，因为它会让人产生handleUpload意见（即它需要知道要更改哪些特定组件数据，并且可能因组件而异）。

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

然后在你的 VueJS 组件中：

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

推荐阅读