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 文件

<template>
  <div>
    <h2>myList</h2>
    <span>myList2:{
         
  { myList2 }}</span>
    <br>
    <button @click="pushData">点我push数据</button>
  </div>
</template>

<script setup lang="ts"> 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)
} </script>

我们此时点击页面的按钮，发现它是响应式的

我们注意到，没有通过 mutations 修改数据，而是通过直接使用的方式。

而且在解构赋值的过程中，如果是引用类型数据的话，解构赋值是响应式的。

总结

学习了 Pinia 的 storeToRefs 方法 和 如何改变数据状态。