Vue3: как смешивать api композиции и api параметров для пространств имён composable/mixin

Question

Добрый день!

Скажем, я хочу использовать Vue с опциями api, но также не хочу использовать миксины, поскольку они вызывают много проблем. Я хочу использовать составные элементы в качестве миксинов, чтобы задать пространство имен для миксинов / составных компонентов.

Итак, моим «решением» было объединить api параметров и api композиции.

Скажем, у меня есть такой миксин:

      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';
...

Однако в этом нет никакого смысла, так как это все равно будет смешано с состоянием компонента.

Кроме того, я мог бы просто использовать миксины только с одним объектом, но я не уверен в этом.

      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) {...}.
      },
    }
}

Мне любопытно, можно ли делать то, что я хочу.

Есть ли способ использовать объект с реактивными элементами и элементами ref из composable в коде параметров api vue?

Заранее спасибо!

Answer 1

Вы можете: деструктурировать и добавить return { namespace: { person, gender} } Изменить компонуемый объект, чтобы он возвращал реактивный объект, содержащий и человека, и пол.