Vue 3 Composition API在多个组件中的重用

问题描述

我有这些文件

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>

我想念什么？谢谢。

解决方法

解决方法非常简单

代替

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>

,

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

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

您的问题的经典答案是，将其移动到 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，而其他组件只能监听计算出的一个。

如果您发现需要访问多个组件来更改引用，那么这可能表明您应该找到另一种方法来实现这一点（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 中的双向模式，这在当时造成了很多问题并且没有很好地实现