有没有更好的方法或在 vue.js 中导入 mixins

Question

I have many mixins created in my project and right now what i do is i will import all the mixins in mixins/index.js files and in any components or pages wherever required i'll just import those mixins from mixins/index.js .

Now i doubt if doing show will i import all the unwanted mixins as well or will just import the mixins files i use?

Let's say i have these mixims created and imported in mixins/index.js

import a from 'mixins/a.js'
import b from 'mixins/b.js'
import c from 'mixins/c.js'
import d from 'mixins/d.js'
import e from 'mixins/e.js'

export {
  a,
  b,
  c,
  d,
  e
}

Now lets say in my 'x' components i will import 'a' mixins .

import { a } from 'mixins/index.js'

export default {
  mixins: [a]
}

In this case i only need 'a' mixins in my 'x' components but since i'm importing from mixins/index.js where i have all static imports of all mixins will this load unwanted mixins as well?

Answer 1

import { a } from './mixins' will import only the requested module but if you do :

import * as mixins from './mixins'

then

mixins:[mixins.a]

this will import all the modules as explained here

Answer 2

You con do something like this, import all the minmins files and than export your minmin files in the index, like this:

index.js

import a from '../mixins/a.js'
import b from '../mixins/b.js'
import c from '../mixins/c.js'
import d from '../mixins/d.js'
import e from '../mixins/e.js'

export {a, b, c, d, e}

then in your component, you can import a specific module exported in the index in this way:

x component

import {a, b} from "../mixins"

in this way you import only what you need and not all the index.js modules