多个组件中的 Vue 3 组合 API 重用

Posted 2023-02-23

【中文标题】多个组件中的 Vue 3 组合 API 重用

【英文标题】：Vue 3 Composition API reuse in multiple components

【发布时间】：2020-12-20 05:34:15

【问题描述】：

我有这些文件

App.vue、Header.vue、search.js 和 Search.vue

App.vue是正常的，只是添加了不同的视图

Header.vue有输入框

<input type="text" v-model="searchPin" @keyup="searchResults" />
<div>searchPin</div>

和脚本：

import useSearch from "@/compositions/search";

export default 
  name: "Header",
  setup() 
    const  searchPin, searchResults  = useSearch();

    return 
      searchPin,
      searchResults
    ;
  
;

search.js 有可复用的代码

import  ref  from "vue";

export default function useSearch() 
  const searchPin = ref("");

  function searchResults() 
    return searchPin.value;
  

  return 
    searchPin,
    searchResults
  ;

现在，它运行良好.. 在输入框中添加内容后，它会显示在下面的 div 中。

我不明白的是如何将这段代码用于像 Search.vue 这样的第三个组件。

我有这个，但它不工作。

<template>
  <div>
    <h1 class="mt-3">Search</h1>
    <div> searchPin </div>
  </div>
</template>

<script>
  import useSearch from "@/compositions/search";

  export default 
    name: "Search",
    setup() 
      const  searchPin, searchResults  = useSearch();

      return 
        searchPin,
        searchResults
      ;
    
  ;
</script>

我错过了什么？谢谢。

【问题讨论】：

“不工作”是什么意思？您能否详细说明您的预期与您所看到的？

我试图显示用户在输入字段中输入的内容，但在 Search.vue 文件中。我在所有页面上都有一个带有搜索框的固定标题，每当用户输入时，它都会搜索并在 search.vue 组件中显示结果。所以，我试图让它成为显示用户输入的基础。目前，它的空白。使用 Vue 2，我们可以使用事件总线，但不确定如何使用组合 API。

如果我理解正确，您希望数据在整个应用程序中保持不变，对吗？

是的，我只是想在标题上搜索并在 search.vue 组件上显示结果。

【参考方案1】：

解决这个问题非常简单

而不是

import  ref  from "vue";

export default function useSearch() 
  const searchPin = ref("");

  function searchResults() 
    return searchPin.value;
  

  return 
    searchPin,
    searchResults
  ;

使用

import  ref  from "vue";

const searchPin = ref("");

export default function useSearch()   

  function searchResults() 
    return searchPin.value;
  

  return 
    searchPin,
    searchResults
  ;

问题在于searchPin 的作用域是函数，所以每次调用函数时，它都会得到一个新的ref。在某些情况下，这是一种理想的效果，但在您的情况下，您需要将其取出。

这是一个同时使用两者的示例，希望它能清除它。

const 
  defineComponent,
  createApp,
  ref
 = Vue


const searchPin = ref("");

function useSearch() 
    const searchPinLoc = ref("");

  function searchResults() 
    return searchPin.value + "|" + searchPinLoc.value;
  

  return 
    searchPin,
    searchPinLoc,
    searchResults
  ;


const HeaderComponent = defineComponent(
  template: document.getElementById("Header").innerhtml,
  setup() 
    return useSearch();
  ,
)


const SearchComponent = defineComponent(
  template: document.getElementById("Search").innerHTML,
  setup() 
    return useSearch();
  
)

createApp(
  el: '#app',
  components: 
    HeaderComponent, SearchComponent
  ,
  setup() 
).mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.9/dist/vue.global.js"></script>
<div id="app">
  <header-component></header-component>
  <search-component></search-component>
</div>

<template id="Header">
  searchPin : <input type="text" v-model="searchPin" @keyup="searchResults" />
  searchPinLoc : <input type="text" v-model="searchPinLoc" @keyup="searchResults" />
  <div>both: searchResults()</div>
</template>

<template id="Search">
  <div>
    <h1 class="mt-3">Search</h1>
    <div>both: searchResults()</div>
  </div>
</template>

【参考方案2】：

为@Daniel 的回答增添风味。 这正是我在最佳实践 ATM 方面遇到的问题，并得出了一些结论：

将 Ref 拉到组合 fn 之外可以解决您的问题，但如果您考虑一下，这就像共享在多个地方使用的数据属性的单个实例。你应该非常小心，因为 ref 对于拉它的人来说是可变的，并且很容易破坏单向数据流。 例如在父组件和子组件之间共享单个 Ref 实例可以比作将其从父数据传递到子组件的道具，并且我认为我们都知道我们应该避免直接改变道具

因此，您的问题的经典答案是，将其移至 Vuex 状态并从那里读取。

但如果你有一个小型应用程序，不想要状态管理器，或者只是想充分利用组合 API，那么我的建议是至少做一些这种模式

import  ref, computed  from "vue";

const _searchPin = ref(""); // Mutable persistant prop

const searchPin = computed(() => _searchPin.value); // Readonly computed prop to expose

export default function useSearch()   

  function searchResults() 
    return searchPin.value;
  

  return 
    searchPin,
    searchResults
  ;

不超过一个组件应该对持久 Ref 进行变异，而其他组件只能监听计算出的一个。

如果您发现多个组件需要访问来更改 ref，那么这可能表明您应该找到另一种实现方式（Vuex、道具和事件等）

正如我所说，我自己仍在尝试理解这一点，也不确定这是否是一个足够好的模式，但它肯定比简单地公开实例更好。

代码安排的另一种选择是封装在 2 个不同的访问挂钩中

import  ref, readonly  from "vue";

const searchPin = ref(""); // Mutable persistant prop

export const useSearchSharedLogic() 
  return readonly(
    searchPin
  )


const useSearchWriteLogic() 
  return 
    searchPin
  


// ----------- In another file -----------

export default function useSearch()   

  const  searchPin  = useSearchSharedLogic()

  function searchResults() 
    return searchPin.value;
  

  return 
    searchPin,
    searchResults
  ;

或类似的东西（甚至不确定这是否可以正常工作）。 重点是，不要直接暴露单个实例

另一点值得一提的是，这个答案采取了措施来保持单向数据流模式。尽管这是多年来经过验证的基本模式，但它并不是一成不变的。随着组合模式在接近的时候变得更加清晰，IMO 我们可能会看到人们试图挑战这个概念并在某种意义上回归到 Angular 1 中的双向模式，这在当时引起了很多问题并且没有很好地实现

【讨论】：

欢迎您！请使用一些 JS 代码高亮标签，以便更轻松地讲授您的答案：***.com/editing-help#syntax-highlighting

@kissu 谢谢，已添加 :+1: :)