pinia--新一代vue状态管理方案（上手篇）

前言

    过了五一就又要踏上找工作之旅了，面试题实在是有点看不下去，突然想起来pinia作为新一代vuex的状态管理方案，至今我还没上手试过，这着实不该...

初始化

    npm init vite-app pinia-learn  创建vue3项目

    npm install pinia@next   安装pinia

    注册pinia

基本使用

    options api方式

        定义状态

        使用状态

    Composition api方式

        定义状态

        使用状态

批量读取状态

    可以利用mapStores和mapState批量向当前组件注入状态

    感觉一个一个引入比较麻烦，我这里做了些改动，以前文示例的cStore和rootStore为例

    修改根文件

        将其他状态引入到根文件并导出（配合webpack的自动来完成应该会更好）

        在组件处批量导入并挂载到computed上

重置、更新与监听

    reset--重置状态

    patch--批量修改状态

        如上图，通过changeMsg只能修改某一个状态，利用patch则可以进行批量更新

    subscribe--监听状态变化

        这只能监听注册到当前组件上的状态，如果想要对全部状态进行监听，可以使用watch观察pinia.state，但是上边改造的registerStore实际上已经会将所有状态注册到当前组件了，故感觉就不需要watch了，而且感觉也用处不是很大

getter

    基于前一个状态计算新状态，但是不会改变原状态 ，必须有显示返回值，可以是对象、值类型或函数，为函数时可以向内部传参以参与计算

actions

    可以将异步任务在此处理，一般配合mapActions解构到methods中使用

        监听actions执行周期，接上图，对函数changeMsg的调用进行监听

---

文档