vue3中storeToRefs让store中的结构出来的数据也能变成响应式(推荐)

更新时间：2024年09月27日 11:45:10 作者：jjw_zyfx

这篇文章主要介绍了vue3中storeToRefs让store中的结构出来的数据也能变成响应式,本文通过实例代码给大家介绍的分需要的朋友可以参考下

2、创建 src/stores/counter.js 文件，其内容如下：

import {defineStore} from "pinia";
import {ref} from "vue";
export const useCounterStore = defineStore('counter',()=>{
    const count = ref(0)
    const increment = ()=>{
        count.value++
    }
    return{
        count,
        increment
    }
})

3、在.vue中进行验证

<script setup>
import {useCounterStore} from "@/stores/counter.js";
import {storeToRefs} from "pinia";
const counterStore = useCounterStore()
const {count} = storeToRefs( counterStore)
// 注意函数不能用storeToRefs 否则结构出来的不是响应式
const { increment } = counterStore
</script>
<template>
  <div>
    <button @click="counterStore.increment">按钮</button>
  </div>
  <h1>{{counterStore.count}}</h1>
  <div>
    <button @click="increment">按钮</button>
  </div>
  <h1>{{count}}</h1>
</template>
<style scoped>
</style>

实验结果如下：

在这里插入图片描述

注意

const {count} = counterStore   这种方式将变量解构出来的count不是响应式的
const {increment } = storeToRefs( counterStore)  同样这种方式将函数解构出来的也不是

到此这篇关于vue3中storeToRefs让store中的结构出来的数据也能变成响应式的文章就介绍到这了,更多相关vue storeToRefs响应式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

关于vue3 vuex4 store的响应式取值问题解决

Vue事件修饰符使用详细介绍
在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理
2022-10-10
浅谈Ant Design Pro 菜单自定义 icon
这篇文章主要介绍了Ant Design Pro 菜单自定义 icon，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
buildAdmin开源项目引入四种图标方式详解
这篇文章主要为大家介绍了buildAdmin开源项目引入四种图标方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
深入理解vue2.0路由如何配置问题
本篇文章主要介绍了vue2.0路由配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Vue3使用路由VueRouter4的简单示例
在vue.js项目中使用vue-router，可以使用路由进行界面或路径跳转,下面这篇文章主要给大家介绍了关于Vue3使用路由VueRouter4的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-07-07
Vue常见报错以及解决方案实例总结
最近做了一个比较老的vue项目,启动居然各种报错,下面这篇文章主要给大家介绍了关于Vue常见报错以及解决方案的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-07-07
Vue路由的模块自动化与统一加载实现
这篇文章主要介绍了Vue路由的模块自动化与统一加载实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
vue渲染时闪烁{{}}的问题及解决方法
v-if和v-show可能是日常开发中最常用的两个指令，虽然看上去两者功能是类似的，但是两者还是存在很大区别的。接下来通过本文给大家分享vue渲染时闪烁{{}}的问题及解决方法，感兴趣的朋友一起看看吧
2018-03-03
详解基于vue-cli3.0如何构建功能完善的前端架子
这篇文章主要介绍了详解基于vue-cli3.0如何构建功能完善的前端架子，本文整合出具备基础功能的前端架子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
VUE3中实现拖拽与缩放自定义看板vue-grid-layout详解
想实现桌面自由拖拽布局的效果,找到了vue-grid-layout栅格布局插件,可以完美解决,下面这篇文章主要给大家介绍了关于VUE3中实现拖拽与缩放自定义看板vue-grid-layout的相关资料,需要的朋友可以参考下
2023-02-02

vue3中storeToRefs让store中的结构出来的数据也能变成响应式(推荐)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具