Vue3：如何混合组合 api 和选项 api 以进行组合/混合命名空间

问题描述

美好的一天！

假设我想将 Vue 与 options api 一起使用，但也不想使用 mixin，因为它们会导致很多问题。我想使用可组合物作为混合来为混合/可组合物提供命名空间。

所以，我的“解决方案”是结合选项 api 和组合 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函数中解构composable并返回它：

<script lang="ts">
import useDataComposable from './dataMixin';
...

export default defineComponent({
  ...
  setup() {
    const {person,gender}= useDataComposable();

    return {
      person,};
  },created() {
    console.log(this.person.first_name) // => returns 'first name2'
 
    // However,console.log(this.gender // returns 'gender2';
...

然而，这没有意义，因为无论如何它都会与组件状态混淆。

另外，我可以只对一个对象使用 mixin，但我不确定。

export default {
  data() {
    return {
      state: {
        person: {
          first_name: 'first name',gender: 'gender',myMethod: function() {...},computed: function() {...}
      },created() {...},onMounted() {...},watch: {
        gender(value) {...}.
      },}
}

我很好奇是否有可能做我想做的事。

有没有办法在options api vue代码中使用带有reactive和ref元素的对象？

提前致谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

composable vuejs3