Vue2 从方法中扩展值

Question

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

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

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

请注意它 return 是如何 { pages, loading, error } 的。我想做的是 return 在使用 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 };
  },
});

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

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

Answer 1

您可以使用 reactive 对象执行此操作。

将result更改为具有初始值的reactive对象。
使用 Object.assign 将 result 更新为 useGetCategory() 的 return 值。
Return 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

Vue2 从方法中扩展值

Vue2 expand value from method

vue.js

vuejs2

vue-composition-api