如何使用 Vue 实例中的 Global Mixin 方法

Question

Let's suppose that I have the following situation, using a Global Mixin to create a global helper method with Vue:

import Vue from "vue";

Vue.mixin({
    methods: {
        replaceString: function (word) {
            return word.toLowerCase().replace(/\W/g, '');
        }
    }
});

let vm = new Vue({
    methods: {
        doSomething: function() {
             console.log(this.replaceString('Hello World'); //helloword
        }
    }
});

I know that I can invoke the method inside the other methods, inside of the component and their childs. But how can I invoke the mixin method "replaceString" from the Vue instance "vm"? I tried to use "vm.replaceString", but keeps returning "undefined".

Answer 1

Few changes to your code and it works:

1. You should change the definition of your mixin (var mixin instead of Vue.mixin)

2. Import the mixin to your new vue component (mixins = [mixin])

    import Vue from "vue"; var mixin = { methods: { replaceString: function (word) { return word.toLowerCase().replace(/\W/g, ''); } } }; let vm = new Vue({ mixins: [mixin] methods: { doSomething: function() { console.log(this.replaceString('Hello World'); //helloword } } });

Answer 2

I think this chunk o code is what you are looking for:

var mixin = {
methods: {
foo: function () {
  console.log('foo')
},
   conflicting: function () {
      console.log('from mixin')
   }
 }
}

var vm = new Vue({
  mixins: [mixin],
methods: {
  bar: function () {
  console.log('bar')
  },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

From the docs