时间戳

首页 > 解决方案 > 在 Nuxtjs 中扩展全局 mixin

javascript - 在 Nuxtjs 中扩展全局 mixin

问题描述

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

实用程序.js：

import Vue from "vue"

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

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

实用程序-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:{
      ...
    }
  })
}

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

标签： javascriptvue.jsvuejs2nuxt.js

解决方案

您可以通过这种方式分离 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 实例，包括第三方组件。

推荐阅读