前言
vuex和pinia的区别？
Pinia读音：['piːnə]，是Vue官方团队推荐代替Vuex的一款轻量级状态管理库。 它最初的设计理念是让Vue Store拥有一款Composition API方式的状态管理库，并同时能支持 Vue2.x版本的Option API 和 Vue3版本的setup Composition API开发模式，并完整兼容Typescript写法（这也是优于Vuex的重要因素之一），适用于所有的vue项目。
比起Vuex，Pinia具备以下优点：
- 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
- 极其轻巧(体积约 1KB)
- store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
- 支持多个Store
- 支持 Vue devtools、SSR 和 webpack 代码拆分
Pinia与Vuex代码分割机制
上述的Pinia轻量有一部分体现在它的代码分割机制中。
举个例子：某项目有3个store「user、job、pay」，另外有2个路由页面「首页、个人中心页」，首页用到job store，个人中心页用到了user store，分别用Pinia和Vuex对其状态管理。
先看Vuex的代码分割： 打包时，vuex会把3个store合并打包，当首页用到Vuex时，这个包会引入到首页一起打包，最后输出1个js chunk。这样的问题是，其实首页只需要其中1个store，但其他2个无关的store也被打包进来，造成资源浪费。
Pinia的代码分割： 打包时，Pinia会检查引用依赖，当首页用到job store，打包只会把用到的store和页面合并输出1个js chunk，其他2个store不耦合在其中。Pinia能做到这点，是因为它的设计就是store分离的，解决了项目的耦合问题。
Action的区别
用于修改数据，有点儿类似 methods 的概念；
它们可以使用defineStore()的 actions属性进行定义，
异步和同步方法都可以使用，项目中的业务逻辑中方法可以用在这（这里与 Vuex 有极大的不同，Pinia 仅提供了一种方法来定义如何更改状态的规则，放弃 mutations 只依靠 Actions）
Pinia 中的监听，监听store中数据的变化后的操作
pinia安装
- Pinia
npm i pinia -S
- main.js引入
import { createApp } from "vue";
import App from "./App.vue";
import {createPinia} from 'pinia'
const pinia = createPinia()
createApp(App).use(pinia).mount("#app");
或者 使用vite的自动导入
直接使用createPinia方法
示例：本地存储用户的操作日志
实现效果： 当用户在页面中操作任何ajax操作的时候，都会记录到本地日志缓存下来
步骤一：在store里 创建
步骤二：在业务代码中
ps:为什么pinia获取的变量要绑定到computed里面？
这是因为data 中的内容只会在 created 钩子触发前初始化一次,这个时候如果data里面绑定的是pinia值类型数据，那么后面无论怎么修改pinia的state状态，data中对应 的属性值是不会变化的,而 computed 则是通过依赖实现的，计算属性在它的相关依赖发生改变时会重新求值。
