Vue2 从方法中扩展值答案

【问题标题】：Vue2 expand value from methodVue2 从方法中扩展值
【发布时间】：2021-07-02 12:36:52
【问题描述】：

我希望这真的很简单。我有一个看起来像这样的组件：

export default defineComponent({
  name: "Home",
  setup() {
    const { pages, loading, error } = useGetPages();

    return { pages, loading, error };
  },
});

注意它如何返回{ pages, loading, error }。我想做的是在使用 onMounted 时返回类似的结果。目前我有这个：

export default defineComponent({
  name: "Categories",
  setup(_, context) {
    const slug = ref(context.root.$route.params.slug);
    const result = ref({});

    const getCategory = (slug) => {
      console.log(slug);
      const { category, loading, error } = useGetCategory(slug);
      result.value = { category, loading, error }; // How can I return the expanded version of this?
    };

    onMounted(() => getCategory(slug.value));

    return { result };
  },
});

如您所见，我正在返回{ result }，这意味着在我的模板中我必须执行{{ result.category }}，但我真正想做的是{{ category }}。我试过返回return result;，但这似乎也不起作用。

有人知道我需要做什么吗？

【问题讨论】：

钩子应该在setup函数中使用。我不确定在 onMounted 里面使用它有什么意义。

标签： vue.js vuejs2 vue-composition-api

【解决方案1】：

您可以使用 reactive 对象来做到这一点。

将result 更改为具有初始值的reactive 对象。
使用Object.assign 更新result，返回值为useGetCategory()。
返回toRefs(result)的传播。

import { reactive, toRefs } from 'vue' // or from `@vue/composition-api` in Vue 2

export default {
  setup() {
    // 1️⃣
    const result = reactive({ category: null, loading: null, error: null });

    const getCategory = (slug) => {
      // 2️⃣
      Object.assign(result, useGetCategory(slug))
    };

    // 3️⃣
    return { ...toRefs(result) };
  }
}

demo

【讨论】：