vue3.0使用Composition API如何使用mixins

在2.0中使用mixins可以把常用方法封装在mixins
例如:

     created() {
       this.hello()
     },
     methods: {
       load() {},
       hello() {
         console.log('hello from mixin!');
         this.load();
       }
     }
}
  mixins: [myMixin],
  methods: {
        load() {
            console.log('覆盖mixins内的方法,mixins里的hello可执行此方法!');
        },
  }
 })

如果在Composition API该如何实现????覆盖mixins内的方法,mixins里的hello可执行此方法

vue3已经不推荐使用mixins了。
而是用更方便的方法,比如 import

 const crudManage = (re, getAll) =>{
  const {
    addObject, // 添加对象
    updateObject,// 修改对象
    deleteObject,// 删除对象
    clearStore,// 清空对象仓库
    deleteStore,// 删除对象仓库
    deleteDB// 删除整个数据库
  } = nfIndexedDB()

  // 添加对象
  const add = () => {
    addObject('blog',{
      id: new Date().valueOf(),
      groupId: 1,
      title: '这是三个博客',
      addTime: '2020-10-15',
      introduction: '这是博客简介',
      concent: '这是博客的详细内容<br>第二行',
      viewCount: 1,
      agreeCount: 1
    }).then((data) => {
      re.value = data
      getAll()
    })
  }

  // 修改对象
  const update = (blog) => {
    updateObject('blog',blog).then((data) => {
      re.value = data
      getAll()
    })
  }

  // 删除对象
  const delObject = (id) => {
    deleteObject('blog',id).then((data) => {
      re.value = data
      getAll()
    })
  }

  // 清空对象
  const clear = () => {
    clearStore('blog').then((data) => {
      re.value = data
      getAll()
    })
  }

  // 删除对象仓库
  const delStore = () => {
    deleteStore('blog').then((data) => {
      re.value = data
      getAll()
    })
  }

  // 删除数据库
  const delDb = () => {
    deleteDB('dbTest').then((data) => {
      re.value = data
      getAll()
    })
  }

  return {
    add, // 添加对象
    update, // 修改对象
    delObject, // 删除对象
    clear, // 清空对象仓库
    delStore, // 删除对象仓库
    delDb // 删除整个数据库
  }
}

然后调用方法

setup () {
const {
add,
update,
delObject,
clear,
delStore,
delDb
} = crudManage(re, getAll)
return {
add,

}

}

https://juejin.cn/post/6924206224078536712

但问题来了,我感觉这样的话,真的就只是单纯地导入了一个外部js的一些方法而已。
像是mixins里面有钩子函数,组件里面也有钩子函数,vue2里面的mixins,是会自动将两个钩子函数里面的内容都调用的。

就像下面这张图说的

但如果是这样的话,应该就实现不了这样的功能了吧

还可以用class的继承。

基类

import { ref } from 'vue'

import { store } from '/nf-state'

export default class BaseComp {
  constructor (_info) {
    this.name = 'baseName'
    this.inheritAttrs = false
    this.components = {}
    this.props = {
      baseProps: { // 设置基类里的属性
        type: String,
        default: '基类定义的 props'
      }
    }
    this.store = store
  }
  _setup (props, ctx) {
    const baseRef = ref('基类setup定义的')

    return {
      store, // 返回状态
      baseRef
    }
  }

}

子类


import { ref, defineComponent } from 'vue'

import BaseComp from './baseComp.js'

/**
 * 返回组件需要的属性
 * @param {*} info 
 * * name = 'baseName'
 * * inheritAttrs = false
 * * components = {}
 * * props = {}
 * * setup = () => {}
 */
const myComp = (info) => {
  // 获取基类的实例
  const comp = new BaseComp({})

  // 设置组件的 name
  if (info.name) {
    comp.name = info.name
  } else {
    comp.name += new Date().valueOf()
  }

  // 附加组件内使用的组件
  if (info.components) {
    Object.assign(comp.components, info.components)
  }
  // 合并属性
  if (info.props) {
    Object.assign(comp.props, info.props)
  }

  // 合并 setup,获取父类的 setup
  const _setup = comp._setup

  // 设置 setup
  comp.setup = (props, ctx) => {
    // 执行父类的setup
    const _re = _setup(props, ctx)

    // 可以制定子类的共用成员
    const childRef = ref('子类setup定义的')

    const _this = {
      props,
      ctx,
      store: _re.store
    }
    // 执行 组件定义的 setup
    const _re2 = (info.setup) ? info.setup.call(_this): {}
    const _re3 = _re2 ?? {}

    // 返回给 template 
    return {
      childRef,
      ..._re3,
      ..._re
    }

  }

  // 返回一个组件需要的各种属性
  return defineComponent(comp)

}

export default myComp

组件

<template>
  基类的成员:{{baseRef}}<br>
  基类的属性:{{baseProps}}<br>
  子类的成员:{{childRef}}<br>
  组件定义的:{{foo}}<br>
  状态:{{store.user}}<br>

</template>

<script>

import { ref } from 'vue'

import childComp from './childComp.js'

export default childComp({
  setup(props, ctx, store) {
    // 可以有 this
    setTimeout(() => {
      this.store.user.name = '修改一下用户名称'
      
    }, 500)

    const foo = ref('组件定义的')

    return {
      foo
    }
  }
})

</script>

这样就可以了。
虽然有点鸡肋。

那我大概了解了,照你的意思的话就是现在,vue3基本不再官方提供Mixins,如果要用的话就只能是自己根据组合式API进行封装。谢了,兄弟

另外,钩子,可以被多次调用的。
就是说,基类钩子、子类钩子、组件钩子,都会被调用。
hook里的钩子也一样会被调用,不受其他钩子的影响。

vue3还是有mixins的 组合选项 | Vue.js
而且还有 extends 组合选项 | Vue.js

只是似乎不支持 script setup