Vue 3 - Как использовать реактивную ссылку и вычислить без .value?

Когда мы используем Options API, мы можем определить некоторые свойства в разделе computed и некоторые свойства в разделе data. Все они становятся доступными из экземпляра по ссылке this, т.е. в одном объекте. Очень подходит.

Например:

if (this.hasMore) {
   this.loading = true;
   ...
}

Где hasMore - вычисляемое свойство, loading - реактивное свойство.

Есть ли возможность сделать что-то подобное с помощью Composition API? Например, чтобы реализовать аналогичный код, но где pagination - простой объект, а не ссылка на компонент, например:

if (pagination.hasMore) {
   pagination.loading = true;
   ...
}

computed вообще не является решением, поскольку возвращает ref и его использование будет полностью отличаться от использования this в приведенном выше примере.


javascript vue.js vuejs3 vue-component vue-composition-api
person nitrovatter    schedule 31.01.2021    source источник
comment
может разделить весь контекст для двух случаев   -  person Boussadjra Brahim    schedule 31.01.2021

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете использовать объект reactive, имеющий свойство, которое является вычисляемым. Тогда все будет доступно так, как вы хотите:

const pagination = reactive({
  loading: false,
  hasMore: computed(() => {
    return true;
  })
})

Demo: 

const { createApp, reactive, computed } = Vue;
const app = createApp({
  setup() {
    const pagination = reactive({
      loading: false,
      hasMore: computed(() => {
        return true;
      })
    })
    if (pagination.hasMore) {
      pagination.loading = true;
    }
    return {
      pagination
    }
  }
});
app.mount("#app");
<div id="app">
  {{ pagination }}
</div>

<script src="https://unpkg.com/vue@next"></script>

person Dan    schedule 31.01.2021