如何从 Vue 应用程序中也使用“this”的外部文件导入方法

Question

I have a vue file that has quite a few methods that I am looking to export into a separate file. The problem is some of these methods make use of the this keyword, and I can't figure out how to import these methods properly. Here is a minimal example

App.vue

export default {
  ...,
  data () {
    return { // assume these get generated properly through the app
        this.orderAmount = null,
        this.tax = null,
        this.totalAmount = null
        
    }
  },
  methods: {
    assignForAccount () {
      this.totalAmount = this.tax * this.totalAmount
      }
    }
}

I would like to move methods such as assignForAccount to a separate file called methods.js , but it I am getting undefined errors when I try to do this:

App.vue

import { assignForAccount } from './methods.js'

export default {
  ...,
  data () {
    return { // assume these get generated properly through the app
        this.orderAmount = null,
        this.tax = null,
        this.totalAmount = null

    }
  },
  methods: {
       assignForAccount
    }
}

methods.js

export const assignForAccount = (context) => {
  context.totalAmount = context.tax * context.orderAmount
}

TIA

Answer 1

You have to pass both this.tax and this.totalAmount from App.vue file into method.js file for the calculations.

method.js :

export function assignForAccount = (tax, totalAmount) => {
    return tax * totalAmount
}

App.vue :

import { assignForAccount } from './methods.js'

methods: {
    this.totalAmount = assignForAccount(this.tax, this.totalAmount);
}