当前位置：网站首页>第八十九期：对Pinia的简单思考

第八十九期：对Pinia的简单思考

2022-07-15 11:47:00 【terrence386】

对Pinia的简单思考

今天出门去和新认识的小伙伴讨论了一下技术方案。

我想未来如果有机会的话，会和他们一起做一些事情吧。

回来的路上我在想一个问题，互联网说白了还是对信息的处理。

眼睛看到的东西，是视觉信息；汽车移动，是轨迹信息；个人的身份信息，店铺信息，上课学习的知识等等，都是信息。

数据不过是信息的载体。

然后就想到了这个公众号后台收到的消息中有不少都回复的消息是要vuex的源码分析文档。

关于vue, 3.0相关的状态管理已经更新成了Pinia。对于Pinia我还没怎么看过源码，预计6月份开始吧，重新读一遍它的源码，看看能不能写个文档出来。

看了Pinia官方文档，很简单。主要就是讲了两件事：

一是告诉我们为什么要写Pinia
二是告诉我们怎么使用Pinia

为什么要写Pinia？看了官方文档之后，我们很容易得出结论。vue更新了,有了新的组合式api,状态管理相关的部分理所当然的也需要更新。另一方面，原有的vuex的写法每次都需要我们手动去往状态对象里添加新的属性或者模块儿。而Pinia可以使用快捷的api直接动态生成，确实很方便。

而且放弃了mutations的操作，同时也不用嵌套多种模块儿，对ts的支持度也很好。

我们可以从官方文档中简单的示例中思考一下它大致包含的内容：

定义一个store

// 定义一个store
// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // could also be defined as
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

在组件中使用

import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    counter.count++
    // with autocompletion 
    counter.$patch({ count: counter.count + 1 })
    // or using an action instead
    counter.increment()
  },
}

defineStore方法，如果我们简单思考一下。他其实就是接收两个参数，第一个参数是ID，第二个参数是状态对象。这两个参数经过处理，最后又返回一个对象，返回的对象中有状态对象上定义的相关属性和action方法。同时还有一些继承而来的方法，这些方法可以在组件中直接使用。

当然，这只是从一个简单的写法中，我们可以做出上面的推测。源码中的实现过程肯定是要比这个复杂的多的多。

早上出门的时候在想，其实前端的开发的需求还是很旺盛的，web，小程序，app以及pc的客户端其实都有很多需求，如果个人的技术栈仅仅限制在web和小程序，岂不是要失去很多机会？

原网站

版权声明
本文为[terrence386]所创，转载请带上原文链接，感谢
https://cloud.tencent.com/developer/article/2049201