Vue2使用mixin

参考文档：https://cn.vuejs.org/api/options-composition.html#mixins

我们可以创建一个Vue2项目，然后尝试使用混入来注入全局变量

首先创建一个mixin，在实例化之前

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.mixin({
  data:function() {
    return  {
      get ABC() {
        return "6666666"
      }
    }
  },
  computed: {
    BASEURL() {
      return "http://123.com"
    }
  }
})

new Vue({
  render: h => h(App),
}).$mount('#app')

就可以在任意实例进行使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>{{ ABC }}</p>

    <p>{{ BASEURL }}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

额外的探索

我们发现如果声明的相同的data，后面的会覆盖前面的

computed计算属性不影响对于data的引用

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.mixin({
  data:function() {
    return  {
      get ABC() {
        return "6666666"
      }
    }
  },
  computed: {
    BASEURL() {
      return "http://123.com"
    }
  }
})
// 一样的data，不一样的值
Vue.mixin({
  data:function() {
    return  {
      get ABC() {
        return "7777"
      }
    }
  },
})

Vue.mixin({
  computed: {
    ABC() {
      return "http://123.com"
    }
  }
})
new Vue({
  render: h => h(App),
}).$mount('#app')