vuejs place global mixin into seperate file-CodePudding

i would like to create a global mixin that is in a seperate file. all the tutorial i have seen online always place the mixin into the same file, or don't explain how to import another file.

mixins don't really make sense if they are all in the same file, so there has to be some way to load them from a different file, right?

here is my test mixin_test.js:

export default mixin_test = {
    
    methods: {
        test: function( msg )
        {
            console.log( msg );
        }
    }
}

in the app.js i have the following:

...
import mixin_test from "./mixin_test.js";
...

and in my component:

export default {
    name:"something",
    
    mixins: [mixin_test],
    
    mounted(){
        this.test( "hello world" );
    }
}

if i open the page in a web browser i get the error message:

Uncaught ReferenceError: assignment to undeclared variable mixin_test

does anyone have any idea what the issue is?

CodePudding user response：

default export isn't the same as named export and doesn't need to be specified with a name. default export is an expression. export default mixin_test = ... is the same as console.log(mixin_test = ...), this results in assigning to non-existent mixin_test variable.

It should be either:

export default {...}

Or:

const mixin_test = {...}
export default mixin_test;