>[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`的嵌套結構,是通過扁平化的方式來相互使用的,**也不再有命名空間的概念,不需要記住它們的復雜關系**

>[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 源碼解讀
- 開發感悟
- 練手項目