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

【问题标题】：Vue3: how to mix composition api and options api for composable/mixin namespacingVue3：如何混合组合 API 和选项 API 以实现可组合/混合命名空间
【发布时间】：2021-07-28 11:20:43
【问题描述】：

美好的一天！

假设我想使用带有选项 api 的 Vue，但又不想使用 mixins，因为它们会导致很多问题。我想使用可组合物作为 mixins 来为 mixins/composables 提供命名空间。

所以，我的“解决方案”是结合 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 元素的对象？

提前致谢！

【问题讨论】：

标签： vuejs3 composable

【解决方案1】：

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

【讨论】：