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

zkure5ic 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(358)

我想将一个函数从现有的vue 3组件提取到一个可在多个组件中使用的可组合函数中。
在我的vue组件中，我使用一个函数来设置ref变量 reset 到 true 或 false （由单击触发）。

当前解决方案：

更改重置变量的功能位于设置功能中。很好。

组成部分

// 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组件中使用该功能，所以我想将该功能放在一个钩子文件中。

理想的解决方案：

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

组成部分：

// 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;
}

我不知道该怎么处理。我e、，如何重新分配 reset.value 从updatepaginatedpage。我可以把它当作论点，但那又怎样呢？我是否应该返回该值，并通过组件中的另一个函数将其赋值？

JavaScript typescript variable-assignment vuejs3 vue-composition-api

来源：https://stackoverflow.com/questions/68314285/how-to-refactor-extract-functionality-from-setup-into-reusable-function

1条答案

按热度按时间

wtzytmuj1#

首先，我认为您目前的解决方案缺失 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 }
}

赞(0）回复(0）举报 2021-09-23

我来回答