如何解决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 中的双向模式，这在当时造成了很多问题并且没有很好地实现
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
