在 Nuxtjs 中扩展全局 mixin答案

【问题标题】：Extending global mixin in Nuxtjs在 Nuxtjs 中扩展全局 mixin
【发布时间】：2021-08-30 12:12:05
【问题描述】：

我在 Nuxtjs 2.15.7 上，我有一个这样的 mixin 文件：

utils.js：

import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({ 
    data(){
      return{
         ...
      }
    },
    methods:{
      ...
    }
  })
}

我想创建另一个全局 mixin 来扩展我的 utils.js，例如：

utils-another.js：

import utils from '@/plugins/mixins/utils.js'
import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({ 
    // ... utils.js codes
    data(){
      return{
         ...
      }
    },
    methods:{
      ...
    }
  })
}

基于一些环境属性，我决定使用 utils.js 或 utils-another.js 。那我该怎么做呢？我不想将所有的 utils.js 代码复制到 utils-another.js ，这使得维护变得困难。

【问题讨论】：

你不能调用或导入utils.js 到另一个吗？或者通过window 实例或类似方式获取它？
utils.js 本身就是一个全局混合。我将它导入到我的另一个mixin中，但是如何合并它们中的两个！！只是导入就可以了？我试图将它用作另一个 mixin 中的 mixin，但出现错误。关于窗口实例，我使用通用（SSR）nuxt，所以我将尽可能与window 实例保持距离：D！但是如果我必须使用它，请告诉我它是如何完成的。

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

你可以这样分离mixin代码

// example utilsMixin1.js
export default {
  data() {
    return {
      //...
    }
  },
  methods: {
    //...
  }
}

// example utilsMixin2.js
export default {
  data() {
    return {
      //...
    }
  },
}

因此，您可以将两个 mixin 设为全局。

// utils-another.js:
import utilsMixin1 from '@/plugins/mixins/utilsMixin1.js'
import utilsMixin2 from '@/plugins/mixins/utilsMixin2.js'
import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({
    mixins: [utilsMixin1, utilsMixin2], // utils.js codes
  })
}

或者只使用一个mixin

// utils-another.js:
import utilsMixin1 from '@/plugins/mixins/utilsMixin1.js'
import Vue from "vue"

if (!Vue.__utils__) {
  Vue.__utils__ = true
  Vue.mixin({
    mixins: [utilsMixin1], // utils.js codes
  })
}

谨慎使用全局mixins，因为它会影响每个创建的单个 Vue 实例，包括第三方组件。

【讨论】：

嗯！！从来没想过！！ tanx 很多：D