>[success] # Pinia -- 状态管理
1. 在`vuex `时候因为想让提供数据是响应式的,因此 我们使用了`vuex `而非直接使用导出一个普通对象进行维护全局这种共享数据或者是跨组件传递数据,随着vue3.x 出现支持了`Composition Api` 完全可以使用 `reactive` 函数将对象变成响应式的数据提供给全局使用
2. 上述这种使用会产生一个问题如果它是服务器端呈现的,**会使您的应用程序暴露于安全漏洞** 因此出现了`Pinia`,将 Pinia 与[Nuxt.js](https://nuxtjs.org/)一起使用更容易,因为 Nuxt 在\_服务器端渲染\_方面处理了很多事情。 例如,**您不需要关心序列化或 XSS 攻击**。
3. Pinia本质上依然是一个**状态管理的库,用于跨组件、页面进行状态共享**(这点和Vuex、Redux一样);
>[danger] ##### `Pinia` 由来
`Pinia`开始于大概2019年,最初是作为一个实验为Vue重新设计状态管理,**让它用起来像组合式API(Composition API)**,并且目前同时兼容Vue2、Vue3,也并**不要求你使用Composition API**
>[danger] ##### 和vuex 区别
`Pinia `最初是为了探索 `Vuex `的下一次迭代会是什么样子,结合了 `Vuex 5` 核心团队讨论中的许多想法,`Pinia`已经实现了`Vuex5`中大部分内容,所以最终决定用`Pinia`来替代`Vuex`,可以说`Pinia` 是`Vuex5`
* `Vuex `相比,Pinia 提供了一个更简单的 API,具有更少的仪式,提供了**Composition-API 风格的 API;**
* 在与 `TypeScript `一起使用时具有可靠的类型推断支持
* 去掉了 `mutations `
* 不再有`modules`的嵌套结构,是通过扁平化的方式来相互使用的,**也不再有命名空间的概念,不需要记住它们的复杂关系**
![](https://img.kancloud.cn/b4/8f/b48fb60e6fa5512025ded3b923917f0c_579x314.png)
>[danger] ##### 总结
`Pinia ` 更多像一个全局的响应式数据集,大家共享触发页面响应
>[info] ## 官网
[为什么要使用-pinia](https://pinia.web3doc.top/introduction.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E4%BD%BF%E7%94%A8-pinia%EF%BC%9F)
- 官网给的工具
- 声明vue2 和 vue3
- 指令速览
- Mustache -- 语法
- v-once -- 只渲染一次
- v-text -- 插入文本
- v-html -- 渲染html
- v-pre -- 显示原始的Mustache标签
- v-cloak -- 遮盖
- v-memo(新)-- 缓存指定值
- v-if/v-show -- 条件渲染
- v-for -- 循环
- v-bind -- 知识
- v-bind -- 修饰符
- v-on -- 点击事件
- v-model -- 双向绑定
- 其他基础知识速览
- 快速使用
- 常识知识点
- key -- 作用 (后续要更新)
- computed -- 计算属性
- watch -- 侦听
- 防抖和节流
- vue3 -- 生命周期
- vue-cli 和 vite 项目搭建方法
- vite -- 导入动态图片
- 组件
- 单文件组件 -- SFC
- 组件通信 -- porp
- 组件通信 -- $emit
- 组件通信 -- Provide / Inject
- 组件通信 -- 全局事件总线mitt库
- 插槽 -- slot
- 整体使用案例
- 动态组件 -- is
- keep-alive
- 分包 -- 异步组价
- mixin -- 混入
- v-model-- 组件
- 使用计算属性
- v-model -- 自定义修饰符
- Suspense -- 实验属性
- Teleport -- 指定挂载
- 组件实例 -- $ 属性
- Option API VS Composition API
- Setup -- 组合API 入口
- api -- reactive
- api -- ref
- 使用ref 和 reactive 场景
- api -- toRefs 和 toRef
- api -- readonly
- 判断性 -- API
- 功能性 -- API
- api -- computed
- api -- $ref 使用
- api -- 生命周期
- Provide 和 Inject
- watch
- watchEffect
- watch vs. watchEffect
- 简单使用composition Api
- 响应性语法糖
- css -- 功能
- 修改css -- :deep() 和 var
- Vue3.2 -- 语法
- ts -- vscode 配置
- attrs/emit/props/expose/slots -- 使用
- props -- defineProps
- props -- defineProps Ts
- emit -- defineEmits
- emit -- defineEmits Ts
- $ref -- defineExpose
- slots/attrs -- useSlots() 和 useAttrs()
- 自定义指令
- Vue -- 插件
- Vue2.x 和 Vue3.x 不同点
- $children -- 移除
- v-for 和 ref
- attribute 强制行为
- 按键修饰符
- v-if 和 v-for 优先级
- 组件使用 v-model -- 非兼容
- 组件
- h -- 函数
- jsx -- 编写
- Vue -- Router
- 了解路由和vue搭配
- vueRouter -- 简单实现
- 安装即使用
- 路由懒加载
- router-view
- router-link
- 路由匹配规则
- 404 页面配置
- 路由嵌套
- 路由组件传参
- 路由重定向和别名
- 路由跳转方法
- 命名路由
- 命名视图
- Composition API
- 路由守卫
- 路由元信息
- 路由其他方法 -- 添加/删除/获取
- 服务器配置映射
- 其他
- Vuex -- 状态管理
- Option Api -- VUEX
- composition API -- VUEX
- module -- VUEX
- 刷新后vuex 数据同步
- 小技巧
- Pinia -- 状态管理
- 开始使用
- pinia -- state
- pinia -- getter
- pinia -- action
- pinia -- 插件 ??
- Vue 源码解读
- 开发感悟
- 练手项目