在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,
}
}
但问题来了，我感觉这样的话，真的就只是单纯地导入了一个外部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里的钩子也一样会被调用，不受其他钩子的影响。