CODEWITHSUNDEEP
javascriptvue.js
user2543127
user2543127

Reputation: 415

Vue Js - split methods.js in multiple js files in a single vue component

I want to split my methods.js in multiple file and import them in my single vue component like this:

import script1 from './script1.js'
import script2 from './script2.js'
import script3 from './script3.js'

export default {
  data: {}
  methods: [script1, script2, script3],
  ...
}

but it doesn't works.

Is there a way to realize that without use Mixins?

Upvotes: 3

Views: 2158

Answers (2)

skirtle
skirtle

Reputation: 29132

The following should work:

import script1 from './script1.js'
import script2 from './script2.js'
import script3 from './script3.js'

export default {
  methods: { script1, script2, script3 }
}

Note the [] has been changed to {}.

This assumes that your script files are using default exports for the functions.

However...

Writing methods: { script1, script2, script3 } is an ES6 shorthand for:

methods: {
  script1: script1,
  script2: script2,
  script3: script3
}

So what you'll end up with is 3 methods called script1, script2 and script3.

The naming problem here is easily solved, you just need to use an appropriate name when you do the import. Something like:

import getUserStatus from './script1.js'

export default {
  methods: {
    getUserStatus
  }
}

Doing it this way it wouldn't matter what the function is called inside script1.js, the choice of name is yours to make when you import it.

To use default exports within script1.js it would be something like this:

export default function (/* function args here */) {
  // ...
}

This creates an anonymous function. You could choose to give it a name if you like.

There are two potential problems with this approach:

  1. You can only import one function from each file.
  2. The name is chosen when you import the function. This could lead to duplication and possible errors if other code requires a particular name.

One solution to these problems would be to use named exports instead of a default export. So within script1.js it might look something like:

export function getUserStatus (/* function args here */) {
  // ...
}

export function getUserGroup (/* function args here */) {
  // ...
}

You'd then import these using:

import { getUserStatus, getUserGroup } from './script1.js'

export default {
  methods: {
    getUserStatus,
    getUserGroup
  }
}

This works fine if you want the importer to cherry-pick which functions to include. However, if each file exports multiple functions that need to all be included together using exactly the right names you could do this instead:

export default {
  getUserStatus (/* function args here */) {
    // ...
  },

  getUserGroup (/* function args here */) {
    // ...
  }
}

This is using a default export again but this time we're exporting an object containing two functions as properties. We could then use this in our component as:

import script1 from './script1.js'

export default {
  methods: {
    ...script1
  }
}

Here the spread operator is being used to copy the properties of script1 across to the methods configuration object. The names of the methods will match the names of the properties within the exported object. The identifier script1 used to hold the imported object doesn't have any impact on the method names in this case.

However, if you find yourself in this scenario, trying to import several interlinked methods, you may find it better to go with a mixin as it seems likely you'll need more than just methods anyway.

Reference for the different forms of export:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

Upvotes: 4

MJ_Wales
MJ_Wales

Reputation: 893

You are close, you need to import methods from within each file, not the whole file;

import { script1 } from './script1.js'
import { script2 } from './script2.js'
import { script3 } from './script3.js'

export default {
  data: {}
  methods: { script1, script2, script3 },
  ...
}

And for example, in script1.js:

export const script1 = function(x) {
   console.log(x);
};

Upvotes: 1

Related Questions