【小兔鮮】day02 Pinia、項目起步、Layout
- 1. Pinia
- 2. 添加Pinia到Vue項目
- 3. 案例：Pinia-counter基礎使用
- 3.1 Store 是什么？
- 3.2 應該在什么時候使用 Store?
- 4. Pinia-getters和異步action
- 4.1 getters
- 4.2 action如何實現異步
1. Pinia
Pinia 是 Vue 的專屬的最新狀態管理庫 ，是 Vuex 狀態管理工具的替代品。
- 提供更加簡單的API （去掉了 mutation ）
- 提供符合組合式風格的API （和 Vue3 新語法統一）
- 去掉了 modules 的概念，每一個 store 都是一個獨立的模塊
- 搭配 TypeScript 一起使用提供可靠的類型推斷
2. 添加Pinia到Vue項目
官方文檔 https://pinia.vuejs.org/zh/
1.安裝Pinia
npm install pinia(base) ? vue3-basic-project git:(complete) npm install piniaadded 18 packages, removed 4 packages, and changed 17 packages in 2s23 packages are looking for fundingrun `npm fund` for detailspackage.json{"name": "vue3-demo-template","version": "0.0.0","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"axios": "^1.1.3","element-plus": "^2.2.19","pinia": "^3.0.1","vue": "^3.2.41"},"devDependencies": {"@vitejs/plugin-vue": "^3.1.2","mockjs": "^1.1.0","vite": "^3.1.8","vite-plugin-mock": "^2.9.6"}
}
2.使用
創建一個 pinia 實例 (根 store) 并將其傳遞給應用：
main.jsimport { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia)
app.mount('#app')
3. 案例：Pinia-counter基礎使用
使用Pinia實現計數器案例
import { defineStore } from 'pinia'// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同時以 `use` 開頭且以 `Store` 結尾。
// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一個參數是你的應用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {// 其他配置...
})
3.1 Store 是什么？
Store (如 Pinia) 是一個保存狀態和業務邏輯的實體，它并不與你的組件樹綁定。換句話說，它承載著全局狀態。它有點像一個永遠存在的組件，每個組件都可以讀取和寫入它。它有三個概念，state、getter 和 action，我們可以假設這些概念相當于組件中的 data、 computed 和 methods。
3.2 應該在什么時候使用 Store?
一個 Store 應該包含可以在整個應用中訪問的數據。這包括在許多地方使用的數據，例如顯示在導航欄中的用戶信息，以及需要通過頁面保存的數據，例如一個非常復雜的多步驟表單。
另一方面，你應該避免在 Store 中引入那些原本可以在組件中保存的本地數據，例如，一個元素在頁面中的可見性。
并非所有的應用都需要訪問全局狀態，但如果你的應用確實需要一個全局狀態，那 Pinia 將使你的開發過程更輕松。
4. Pinia-getters和異步action
4.1 getters
Getter 完全等同于 store 的 state 的計算值。可以通過 defineStore() 中的 getters 屬性來定義它們。推薦使用箭頭函數，并且它將接收 state 作為第一個參數：
export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},
})
Pinia中的 getters 直接使用 computed函數進行模擬。
4.2 action如何實現異步
action中實現異步和組件中定義數據和方法的風格完全一致
DAY2 P4 TODO
)
