Vue3：如何混合组合 api 和选项 api 以实现可组合/混合命名空间

Question

再会！

假设我想将 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.
...

我知道我可以在设置函数中解构可组合项并返回它：

<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 元素的对象？

提前致谢！

Answer 1

您可以：解构并添加 return { namespace: { person, sex} } 更改可组合项以返回包含 person 和 sex 的反应式。