Try   HackMD

Pinia介紹

大綱

Pinia簡介

  • 可跨元件/頁面共享狀態
  • 支援Vue2和Vue3
  • TypeScript支援
  • Actions 支援同步和非同步
  • 移除了Mutations

Pinia&Vuex

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Pinia架構

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

安裝

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

掛載

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

創建Store

CPMPF/src/ store

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

定義Store

引入defineStore

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Store ID

Store ID 必須為唯一值

如果ID 重複，在同一個Vue元件/ TS
檔裡定義Store 實例變數的時候，會以
先定義的為有效值，後續定義的store不
會覆蓋先前定義的store

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Store範例

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

元件引入Pinia

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

取用state

Components引入完
此時store已經是proxy的格式，直接”userStore.”就可以取出變數或方法

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

storeToRefs 解構

  • 透過解構來生省略用時”userStore.”的字眼
  • state、getters需透過pinia的storeToRefs方法來解構(若用一般方法解構會失去響應式的功能)
  • Store裡的function可以用一般解構方式解構

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

$reset初始化

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

$patch 批量修改(物件形式)

  • 以賦值的方式來修改值
  • $patch須帶入一個物件，物件裡寫欲修改的變數與值
  • 可修改一至多個變數

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

$patch 批量修改(函數形式)

  • 可以對引用的變數加以修改
  • 可修改一至多個變數

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

$subscribe 訂閱

  • 監聽state的變化
  • 若state有被修改則會觸發$subscribe

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Store寫法差異

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

@yu736

Last changed by 
 
按下F5
這個團體名稱源自於在程式開發時常用的重新整理快捷鍵，象徵著不斷優化、更新自己的程式技能。
0
250

Read more

最小生成樹（minimum spanning tree，MST）

最小生成樹（Minimum Spanning Tree，MST）是指在一個帶權無向圖中，找到一棵包含所有節點，權值最小的樹。其中，權值是指樹中所有邊權重的總和。

May 9, 2025
運算式表達式(中序、前序、後序)

運算式(Expression)有三種表示方式:中序式(Infix)、前序式(Prefix)、後序式(Postfix)

Dec 27, 2024
氣泡排序(Bubble Sort)

氣泡排序是反覆進行將相鄰數字做比較後重新排序，因排序時一個一個浮出序列頂部，很像水中泡泡浮起來的樣子，亦稱泡泡排序，最壞情況下，數是由大排到小，每次比較後將數值對調，因此，時間複雜度為O(n^2)。

Dec 24, 2024
OOP Test

Object-Oriented Programming (OOP) Q1. What is an example of dynamic binding? [ ] any method [ ] method overloading [x] method overriding [ ] compiling Q2. For which case would the use of a static attribute be appropriate? [ ] the number of people in each house in a small neighborhood [ ] the lot size for each house in a small neighborhood

Dec 13, 2024
Read more from 按下F5
Published on HackMD