pinia-学习之路 03,storeToRefs 及 改变数据状态
引言
本系列会以我的一个理解,来介绍并开始学习 Pinia。
中间会插入自己所联系到的 乱七八糟 的 知识点。
问题
通过上一节中,我们发现,通过解构赋值这种形式,发现数据它并不是响应式的。
那其实问题还是挺严重的,因为我们如果修改了这个值,其它地方引入的这个值,按理来说也应该需要跟着进行变动,是需要保证它是响应式数据才不会出错。
所以这里通过 Pinia 提供的响应式方法,storeToRefs 来处理。
storeToRefs 内部主要做了什么?
进入 hello.vue 文件中,改变文件内容为
import { mainStore } from '../store/index'
import { storeToRefs } from 'pinia'
const store = mainStore()
const { hello: myHello } = storeToRefs(store)
// 响应式数据
console.log('myHello', myHello)
// 非响应式数
const hello2 = 'hello2 world2'
console.log('myHello2', hello2)
这样我们的数据就会是响应式数据。