前言
日常开发时有些业务场景功能很复杂,如果将所有代码都写在一个vue组件中,那个vue文件的代码量可能就几千行了,维护极其困难。这时我们就需要将其拆分为多个组件,拆完组件后就需要在不同组件间共享数据和业务逻辑。有的小伙伴会选择将数据和业务逻辑都放到pinia
中,这样虽然可以解决问题。但是如果将所有的复杂的业务都放在pinia
中,那么pinia
就会变得很乱。
将数据和业务逻辑都封装到hooks中
这时你还有另外一个选择,使用Composition API
将数据和业务逻辑都抽取到hooks
中。state
状态的定义和更新以及具体的业务逻辑全部由hooks
内部维护,组件只负责使用hooks
暴露出的state
状态和方法。
下面是我们封装的hooks
:
export const useStore = () => {
const count = ref(0);
const doubleCount = computed(() => {
return count.value * 2;
});
function increment() {
count.value = count.value + 1;
}
function decrement() {
count.value = count.value - 1;
}
return {
count,
doubleCount,
increment,
decrement,
};
};
组件只需要使用hooks中暴露出的状态count
和doubleCount
,以及方法increment
和decrement
,无需关注具体的内部逻辑是如何实现的。
上面的封装其实是有问题的,如果我们将组件拆为两个,分别为CountValue.vue
(显示count
的值)和CountBtn.vue
(修改count变量值)。
CountValue.vue
组件代码如下:
<template>
<p>count的值是{{ count }}</p>
<p>doubleCount的值是{{ doubleCount }}</p>
</template>
<script setup lang="ts">
import { useStore } from "./store";
const { count, doubleCount } = useStore();
</script>
CountBtn.vue
组件代码如下:
<template>
<button @click="decrement">count--</button>
<button @click="increment">count++</button>
</template>
<script setup lang="ts">
import { useStore } from "./store";
const { decrement, increment } = useStore();
</script>
由于我们的count
变量是在useStore
函数中定义的,所以每调用一次useStore
函数都会重新定义一个count
变量。在我们这里CountValue
和CountBtn
组件都在setup
中调用了useStore
函数,通过useStore
函数拿到的就不是同一个count
变量。这样就会导致我们在CountBtn
中修改了count
变量的值,但是CountValue
组件中显示的count
变量的值一直没变。
多个组件同时调用hooks如何共享同一份state状态
要解决上面的问题其实很简单,问题的原因是因为每次调用useStore
函数都会生成一个新的count
变量。那我们就不将count
变量的定义写在useStore
函数中,只需要将count
变量的定义写在useStore
函数的外面就可以了。
下面是优化后的hooks
:
import { computed, ref } from "vue";
// 将count的定义放在外面
const count = ref(0);
const doubleCount = computed(() => {
return count.value * 2;
});
export const useStore = () => {
function increment() {
count.value = count.value + 1;
}
function decrement() {
count.value = count.value - 1;
}
return {
count,
doubleCount,
increment,
decrement,
};
};
我们将count
变量定义放在了useStore
函数的外面,这样CountValue
和CountBtn
组件中调用useStore
拿到的count
变量都是我们在useStore
函数外面定义的count
变量。
总结
这篇文章介绍了在多个组件中需要复用状态和业务逻辑的情况时,我们可以不将这些状态和业务逻辑写到pinia
中,而是使用Composition API
将状态和业务逻辑封装成一个hooks
。为了多个组件同时调用hooks
时能够共用同一个state
状态,我们需要将定义的变量写在useStore
函数外面。文章来源:https://www.toymoban.com/news/detail-818523.html
如果我的文章对你有点帮助,欢迎关注公众号:【欧阳码农】,文章在公众号首发。你的支持就是我创作的最大动力,感谢感谢!文章来源地址https://www.toymoban.com/news/detail-818523.html
到了这里,关于有了Composition API后,有些场景或许你不需要pinia了的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!