VUE的mixins 与 Less的mixin

一、VUE的mixins

mixins是对vue组件的一种扩展，将一些公用的常用数据或者方法，构建一个可被混入的数据结构，被不同的vue组件进行合并，就可以在不同的vue组件中使用相同的方法或者基础数据。

mixins和vuex的区别。
vuex是公共状态管理，在一处引用组件改变了vuex里面的数据状态，其他引入vuex数据的组件也会对应修改，所以引用的数据指向的都是一处，在js中，有点类似于浅拷贝
vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都属于vue组件自身。在js中，有点类似于深度拷贝

mixins何时使用
只是提取公用的数据或者通用的方法，并且这些数据或者方法，不需要组件间进行维护，就可以使用mixins，类似于js中封装的一些公用的方法

示例

例如多个菜单、页面中涉及到同一个、多个下拉数据的查询条件，每次定义，调用接口都是重复，所以可使用mixins

新建js文件

import { OpeShopListApi } from '@/api/omsOperation/OpeShopListApi';
export default {
  data() {
    return {
      fxgShopList: []
    }
  },
  created() {
    this.initFxgShopList()
  },
  methods: {
    initFxgShopList() {
      OpeShopListApi.opeShopList().then(res => {
        this.fxgShopList = res || [];
      });
    },
  }

}

引用：

import shopMin from '@/mixins/shop';

mixins: [shopMin], //混入多个文件的写法

跟正常data中定义的数据一般使用就可以

一、Less的mixin

允许你将一个类嵌入到另一个类中，被嵌入的类也可以看作变量

Less把这种特性称作 mixin，中文把翻译为“混入”或“混合”，其目的就是实现公用样式的复用

less文件
.one, #two {
    color: red;
}
.mixin-one {
    .one();//括号是可选的
}
.mixin-two  {
    #two(); //括号是可选的
}


编译后的css
.one,
#two {
  color: red;
}
.mixin-one {
  color: red;
}
.mixin-two {
  color: red;
}