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的调用进行监听

文档

有这样一个需求，就是希望通过本地的 Json 文件来写入一些内容，比如请求后端接口的 API 前缀，我们在 public 目录下面新建一个 project.config.json 文件来做一些配置项：

这样有一个好处就是项目打包发布之后的文件也可以通过更改这个静态文件来改变一些配置项，省的因为频繁更改配置，而需要重新打包

然后我们在程序的主文件 main.js 中来通过请求这个静态文件，然后将读取的结果存在 Vue 的全局属性 $config 下面

那么接下来我们还需要在 Vue 程序实例化之前就执行 getConfig() 方法 ，这样才能确保我们在请求后端接口的时候能提前拿到 API 的 baseUrl

是不是很灵活，应该还有很多的场景能够用到该方法。

---