Vue3 vite通过2个script标签实现快捷导入mixins（菜鸟学徒--文学而）

# Vue3 vite通过2个script标签实现快捷导入mixins，并通过mixins获取页面定义方法函数（菜鸟学徒--文学而）

之前一直使用的vue2，初学vue3使用mixins发现通过setup导入mixins的方式有些麻烦，网络上百度方法大部分导入mixins还需要额外导入mixins中的方法，使用规范上可能不太规范但是适用，本菜鸟根据网上方法结合后mixins不需要额外导入方法为:
1.创建自己的mixins.js （mymixins.js）

```javascript
import {getCurrentInstance} from ‘vue’//用于获取页面变量方法
export const MyMixin = {
  data() {
    return {
      mixintxt: 'mixins中的数据'
      getcurrent:getCurrentInstance()//这一行必须要，不然没办法获取
    }
  },
  methods: {
    DiaLog() {
      console.log('测试')
​      console.log('mixins中打印该mixins的data定义的变量仍然使用this', this.mixintxt)//用于获取页面变量方法
      console.log('打印页面定义的数据',this.getcurrent.setupState.vuetxt)
      this.getcurrent.setupState.VueFun()//本菜鸟并不确定这样是否符合规范，但是实现了我需要的效果
​    }
  }
}

```

`在这里插入代码片`//不想分别创建多个mixins文件，可用此方法创建多个

```javascript
export const MyMixin2 = {
  data() {
​    return {
​      mixintxt2: 'mixins2中的数据'
​    }
  },
  methods: {
​    DiaLog2() {
​      console.log('测试2')
​    }
  }
}
```

2.在vue3的vue文件中【注意先后顺序，setup语法糖的在后面】

```javascript
<script>
import { MyMixin } from '../mixin/mymixins'//导入你想要使用的mixins
export default {
  mixins: [MyMixin]
}
</script>
<script setup>
const { proxy } = getCurrentInstance()//此方法具体文档请自行百度
const vuetxt=ref('页面中定义的变量')
const VueFun=()=>{
    console.log('页面中定义的方法')
}
const ToAxios = () => {//页面上的点击事件，不详细描述
  proxy.DiaLog()//执行mixins中的方法
  console.log(proxy.mixintxt)//查看mixins中定义的变量
  proxy.mixintxt = '修改后'
  console.log(proxy.mixintxt)//同vue2中修改mixins中变量的方法一样
}
</script>
```

## 另外
如果是用的另外一种形式的mixins，则只需要这么做
1.mixins文件

```javascript
import {getCurrentInstance} from ‘vue’//用于获取页面变量方法
export const IndexMixins2=()=>{
    const _this=getCurrentInstance()
    const mixinsFun=()={
        _this.setupState.VueFun()
        consoel.log(_this.setupState.vuetxt)
    }
    return { mixinsFun }
}
```
2.在vue中

```javascript
<script setup>
import {IndexMixins2} from 'mixins文件路径'
const {mixinsFun}=IndexMixins2()
const vuetxt=ref('页面中定义的变量')
const VueFun=()=>{
    console.log('页面中定义的方法')
}
onMounted(()=>{
    mixinsFun()
})
</script>
```