Pinia | 您所在的位置:网站首页 › vue3修改数据 › Pinia |
一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第19天,点击查看活动详情。 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)这样我们的数据就会是响应式数据。 这里再次注意!!! 这里再次注意!!! 这里再次注意!!! 上述情况的发生,是因为我们定义的是基本数据类型,而且没有使用 storeToRefs,所以出现了上述解构赋值,没有发生响应式数据。 下面我会再测试一下引用数据类型的解构赋值,是否会出现同样的情况。 改变数据状态上面我们只是使用了 store 的 state,还并未对 state 里面的数据进行修改,下面我们尝试改变一下 state 里面的数据状态。 这里值得注意的是,之前我们改变 state 里面的数据状态,是通过 mutations 的方式来进行的。现在没有 mutations 了,那么我们如何要如何更改呢?下面我们学习一下。 在 state 里面创建一个名为 myList 的数组 state: () => { return { hello: 'hello world', myList: [] } }在 view 文件夹下,创建一个 myList.vue 文件 myList myList2:{{ myList2 }} 点我push数据 import { mainStore } from '../store/index' import { storeToRefs } from 'pinia' const store = mainStore() const { myList: myList2 } = store const pushData = () => { myList2.push(1) console.log('myList2', myList2) }我们此时点击页面的按钮,发现它是响应式的 我们注意到,没有通过 mutations 修改数据,而是通过直接使用的方式。 而且在解构赋值的过程中,如果是引用类型数据的话,解构赋值是响应式的。 总结学习了 Pinia 的 storeToRefs 方法 和 如何改变数据状态。 |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |