vue3：组合式API和选项式API里分别如何使用store

本文主要是介绍vue3：组合式API和选项式API里分别如何使用store，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue3越来越主流了，但是很多人还不习惯vue3的组合式API写法，依旧喜欢用选项是API，但是很多功能的写法是不同的，比如我今天要分享的store写法。

我用的store是pinia。

选项式API（script里不带setup）的写法：

在setup里将store实例化，然后其他地方用this调用即可，watch里不需要加this。

<script>import useDesignerStore from '@/store/modules/designer';export default {name: 'cpt-button',setup() {const designerStore = useDesignerStore();return {designerStore}},watch: {'designerStore.refreshCptData': {handler() {this.designerStore.clearCurrentCpt()}}},created() {this.designerStore.setRefreshCptData();}}
</script>

组合式API（script里带setup）的写法：

<script setup>
import useDesignerStore from '@/store/modules/designer';
const designerStore = useDesignerStore();
watch(() => designerStore.refreshCptData,() => {designerStore.clearCurrentCpt()}
)
const setRefreshCptData = ()=>{designerStore.setRefreshCptData()
}

这篇关于vue3：组合式API和选项式API里分别如何使用store的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---