浅谈mixins、混入

[chenjianou]

vue的mixins是混入的意思、即这个代码可以在vue任意的组件里进行使用，而他的this也会指向他的当前组件。我们可以在全局或者局部去引用mixins。 在全局使用mixins是

  computed: {
    uploadUrl(){
      return this.$http.defaults.baseURL + '/upload'
    }
  },
  methods: {
    getAuthHeaders(){
      return {
        Authorization: `Bearer ${localStorage.token || ''}`
      }
    }
  }
})

我们经常会以这样的方式进行全局注册mixins， 而我们在项目中也会使用局部的mixins， 我们在使用mixin的时候也会因为这不是一个主要的代码逻辑、而且冗余繁多的时候将代码提取出来用mixins进行编写，这个时候我们就用到局部的mixins了 代码示例 export default { } 将对象暴露出去 组件中

 export default {

 mixins : [ minxins]
}
</script>

这样的方式将代码进行引入，实际上在代码中使用method等属性也是一样的，我们这样的方式的话也是可以很好的，将代码的进行提取，整体页面会更加清晰整洁。我们在用局部的mixins的时候也不会将主要逻辑写在mixins中。