一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

pinia-学习之路 04，改变数据状态的方式

引言

本系列会以我的一个理解，来介绍并开始学习 Pinia。

中间会插入自己所联系到的 乱七八糟 的 知识点。

问题

这里说下在上节中的 storeToRefs，它的内部具体做了什么？

可以看下源码，其实主要做的就是使用 Vue3 的 toRaw 和toRef 进行操作

function storeToRefs(store) {
    // See https://github.com/vuejs/pinia/issues/852
    // It's easier to just use toRefs() even if it includes more stuff
    if (isVue2) {
        // @ts-expect-error: toRefs include methods and others
        return toRefs(store);
    }
    else {
        store = toRaw(store);
        const refs = {};
        for (const key in store) {
            const value = store[key];
            if (isRef(value) || isReactive(value)) {
                // @ts-expect-error: the key is state or getter
                refs[key] =
                    // ---
                    toRef(store, key);
            }
        }
        return refs;
    }
}

数据状态改变

1. $patch-对象形式

$patch 这个是 store 的方法，可以批量的进行数据的修改，说一下使用

通过在 myList.vue 文件中修改 pushData 方法

const pushData = () => {
  /**
   * 第一种形式
   */
  // store.myList.push(1)
  // myList2.push(1)
  // store.hello = 'ccc'
  // console.log('myList2', myList2)

  store.$patch({
    hello: store.hello + 'ccc'
  })
}

可以发现我这里就只用到了基本数据类型，没有对引用数据类型进行操作，因为无法进行方法操作，只能赋值。这就是 $patch-对象形式 的弊端。

2. $patch-函数形式

而 $patch-函数形式 刚好解决了这一弊端，可以进行引用类型的方法操作

const pushData = () => {
  store.$patch((state)=>{
    state.hello += 'ccc'
    state.myList.push()
  })
}

但是这样和直接解构赋值的形式，然后再使用。有什么区别呢🙄，简单的方法使用还好，复杂逻辑处理还是感觉到不太方便。

3. actions

所以在复杂逻辑处理时，我们还是需要通过在 store 的 actions 里面定义方法，写相关逻辑，在外层调用这种形式比较好些。

注意 actions 的里面，不要使用箭头函数。

  actions: {
    changeData() {
      this.hello += 'cc',
      this.myList.push(1)
    }
  }

之后在 myList.vue 文件中进行调用即可。

const pushData = () => {
  /**
   * 第四种形式
   */
  store.changeData()
}

总结

学习了 Pinia 中的 storeToRefs 方法内部是如何处理的 和 改变数据状态的四种方式。