---
tags: Vue
disqus: HackMD
---

# Pinia介紹

## 大綱

- [Pinia簡介](#Pinia簡介)
- [Pinia & Vuex](#Pinia&Vuex)
- [Pinia架構](#Pinia架構)
- [創建Store](#創建Store)

## Pinia簡介

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

## Pinia&Vuex


## Pinia架構


### 安裝


### 掛載


## 創建Store

CPMPF/src/ store


### 定義Store

引入defineStore


### Store ID

> Store ID 必須為唯一值

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


### Store範例


### 元件引入Pinia


### 取用state

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


### storeToRefs 解構

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


### $reset初始化


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

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


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

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


### $subscribe 訂閱

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


### Store寫法差異


@yu736