如何将 setup() 中的功能重构/提取为可重用函数

Question

我想从现有的 Vue 3 组件中提取一个函数，成为一个可在多个组件中使用的可组合函数。

在我的 vue 组件中，我使用了一个函数，它将引用变量 reset 设置为 true 或 false（通过点击触发）。

当前解决方案：

改变reset变量的函数在setup函数中。工作正常。

组件

// Vue3Component.vue
<script lang="ts">
import { ref, defineComponent } from "vue";
    export default defineComponent({

        setup() {
            const reset = ref(false);

          // Triggered by click
            function updatePaginatedPage(paginaValue: {
              resetState: boolean;
            }) {
                  // Sets reset to true or false
                  reset.value = paginaValue.resetState;
              }
            }
        }
    })
</script>

由于我需要在另一个 Vue 组件中使用该功能，因此我想将该功能放在挂钩文件中。

所需的解决方案：

将从文件导入的重置变量更改为设置函数的函数。我不知道，如何将值分配给一个变量（以及更多在 useUpdatePaginatedPage() 中的东西）以将新值分配给组件中的重置变量。

组件：

// Vue3Component.vue
<script lang="ts">
    import { ref, defineComponent } from "vue";
    import { useUpdatePaginatedPage } from "@/hooks/updatePaginatedPage";

    export default defineComponent({
        const reset = ref(false);

        // function from hook (below)
        useUpdatePaginatedPage({ resetState: false });

    })
</script>

挂钩/可组合函数

// updatePaginatedPage.ts
export const useUpdatePaginatedPage = function(paginaValue: {
    currentPage: number;
    resetState: boolean;
  }, reset: any) {
    reset.value = paginaValue.resetState;
}

我不知道如何处理。 即，如何从 updatePaginatedPage 重新分配 reset.value。 我可以将它作为参数传递，但那又如何呢？ 我应该返回值并通过组件中的另一个函数分配它吗？

Answer 1

第一个我认为您当前的解决方案缺少return { reset, updatePaginatedPage }（以使这些值/函数在模板中可用）

如果你看一下setup()，reset 变量是函数的局部变量。为了使其可重用，您需要再次使其成为某个函数的局部变量 - 比如说 usePagination - 每次从某个组件的 setup() 调用该函数时，新的本地变量 reset 和绑定到的 updatePaginatedPage将创建该变量...

从某种意义上说，您需要的重构只是将整个setup() 函数重命名为其他名称并将其存储在自己的文件中...

我们看一下代码：

// composables/usePagination.js
export usePagination(/* pass any params you want for desired behaviour */) {
  const reset = ref(false);

  function updatePaginatedPage(paginaValue: {
    resetState: boolean;
  }) {
    reset.value = paginaValue.resetState;
  }

  return { reset, updatePaginatedPage }
}

然后在某个组件中使用它...

setup() {
  const { reset, updatePaginatedPage } = usePagination(/* pass any params you want for desired behaviour */)

  // make it available to component's template
  return { reset, updatePaginatedPage }
}