This is the 13th day of my participation in the August More Text Challenge.More challenges in August

Vue. Mixin is explained in the official Vue documentation:

Mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain any component option. When a component uses mixin, all mixin options are “blended” into the component’s own options.

Mixins allow you to encapsulate a block of functions that can be used in other components of your application. If used properly, they don’t change anything outside the scope of the function, so even if you execute the same input multiple times, you’ll always get the same value. Really powerful!

Mixing refers to the reuse of repeated code to reduce the reuse of code.

Mixins can be seen as Vue instances where data/methods/ lifecycle functions can be reused.

Vue.mixin provides us with two ways of mixing: local mixing and global mixing.

Examples of local mixing

  1. Export a mixin

    //myMixin.js

export let myMixin = {
  data(){
		return{
		  message:'hello mixin'}},methods: {testFun(){
			console.log(this.message)
		}
  }
};
Copy the code

  2. Import on the requirements page

    
`import {myMixin} from "./mixin"; `

  new Vue({
	  // Mixins are the same class as data. Note the plural s here
	  mixins:[myMixin],
	  create: {this.testFun()
	  }
  })
Copy the code

    Example of global mixin usage

    Global mixin we simply import mixin.js into main.js and put the mixin into the vue.mixin () method.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router.js'
import mixin from "./mixin/mixin.js"
Vue.config.productionTip = false
Vue.mixin(mixin)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
Copy the code

Global interfuse is more convenient, we will not declare in the sub-component, global interfuse will affect each component instance, need to be careful when using; After this global mixin, we can call mixin variables/methods directly in the component via this.

Mixins blend the distinction between objects and Vuex

Vuex is state sharing management, so all variables and methods in Vuex can be read and changed and interact with each other.

Mixins can define common variables or methods, but the data in mixins are not shared, that is, mixin instances in each component are different and exist independently without mutual influence.

Mixins mixed with functions of the same name will be recursively merged into arrays. Both functions will be executed, but the mixin function of the same name will be executed first.

Mixins mixed with objects of the same name will be replaced, the component of the same name will be executed first, that is, the component of the same name object mixins mixed with the object of the same name will be overwritten;