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

1、首先需要安装pinia 具体安装和使用教程参考

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)  同样这种方式将函数解构出来的也不是

原文地址：https://blog.csdn.net/jjw_zyfx/article/details/142533173

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！