再会！
假设我想使用带有选项 api 的 Vue，但也不想使用 mixins，因为它们会导致很多问题。我想使用可组合作为混合来为混合/可组合提供命名空间。
所以，我的“解决方案”是结合 options api 和 composition api。
假设我有一个这样的mixin：
export default {
data() {
return {
person: {
first_name: 'first name',
last_name: 'last name',
},
gender: 'gender'
}
}
所以我决定将其转换为可组合的，如下所示：
export default () => {
const person = reactive({first_name: 'fn', last_name: 'ln'});
const gender = ref('gender');
return {
person,
gender,
}
}
因此，在我的 .vue 文件中，我可以导入可组合：
<script lang="ts">
import useDataComposable from './dataMixin';
...
export default defineComponent({
...
setup() {
const dataComposable = useDataComposable();
dataComposable.gender.value = 'gender2';
dataComposable.person.first_name = 'first name2';
return {dataComposable};
},
created() {
// I want to use data and methods inside the composable as namespace.attribute
// eg:
console.log(this.dataComposable.person.first_name) // => returns 'first name2'
// However,
console.log(this.dataComposable.gender // does not return 'gender2';
// but returns Ref object.
...
我知道我可以在 setup 函数中解构可组合并返回它：
<script lang="ts">
import useDataComposable from './dataMixin';
...
export default defineComponent({
...
setup() {
const {person, gender}= useDataComposable();
return {
person, gender,
};
},
created() {
console.log(this.person.first_name) // => returns 'first name2'
// However,
console.log(this.gender // returns 'gender2';
...
但是，这没有任何意义，因为无论如何它都会与组件状态混淆。
另外，我可以只对一个对象使用 mixins，但我不确定。
export default {
data() {
return {
state: {
person: {
first_name: 'first name',
last_name: 'last name',
},
gender: 'gender',
myMethod: function() {...},
computed: function() {...}
},
created() {...},
onMounted() {...},
watch: {
gender(value) {...}.
},
}
}
我很好奇是否可以做我想做的事。
有什么方法可以在选项 api vue 代码中使用可组合的响应和 ref 元素的对象？
提前致谢！