---
# System prepended metadata

title: 6.2 Vuetify + pinia

---

---
# 6.2 Vuetify + pinia
---
# 6.2 Vuetify + pinia
[Vuetify-for-Vue3](https://next.vuetifyjs.com/en/getting-started/installation/)
![](https://i.imgur.com/k5gsCew.png)
1. (裝一次就好 只是為了安裝vuetify...)在外面 npm i -g @vue/cli (vue2)
2. 正常vite sop
3. vue add vuetify
4. ![](https://i.imgur.com/mrRPF7y.png)
5. html最外層記得 v-app

---

搭配特別好用插件 Icônes 
https://next.vuetifyjs.com/en/features/icon-fonts/
以下兩方法vuetify均可生成按鈕
![](https://i.imgur.com/76q6WA9.png)


---
# pinia 
雖然vue初始有選擇 但目前會被vuetify蓋掉，要補上

## 初始:
![](https://i.imgur.com/SZrAMvI.png)

![](https://i.imgur.com/mspSEkd.png)

建立要的變數
![](https://i.imgur.com/8sRhFwt.png)

## 導入變數

### 版本一: 直接.key(不解構就是響應式)
![](https://i.imgur.com/lEBuVRV.png)
就是多打"setting."  如果多次引用嫌打"setting."煩就用版本二
*但這裡setting.selectedAlarm並非ref,是類似ref，所以用watch監測是ref變化時，會說他並非ref,就要用下法

### 版本二:解構
(忽略第二個Import )
![](https://i.imgur.com/nh1CIZW.png)
就麻煩所有要用的都要在最下行先打一次

---

### pinia 變數/getters /actions
![](https://i.imgur.com/OmfYCWf.png)

[getter actions內部function別用箭頭含式，照我這格式打就是 (this 會有問題)](https://juejin.cn/post/7063376847198748702#:~:text=%E5%A6%82%E6%9E%9C%E4%BD%BF%E7%94%A8%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E4%BC%9A%E5%AF%BC%E8%87%B4%20this%20%E6%8C%87%E5%90%91%E6%9C%89%E9%97%AE%E9%A2%98)
getters "類似" computed 
getters 是在stores 資料檔直接存取資料=>加工後在回傳
可接state(變數)/this(自己研究)


 ## pinia-localstorage 插件 
 [pinia-plugin-persistedstate](https://www.npmjs.com/package/pinia-plugin-persistedstate)
 
 1. npm i pinia-plugin-persistedstate
 
 2. 建plugin資料夾的pinia.js
 
```javascript=
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia
```
 
 3. store/xxx.js
```javascript=
 state() {
    return {
        selectedAlarm: 1,
      }
  },
    //   跟state同層級
  persist:{
    key:'pomodoro-settings',
//         如果只要訂某資料，加下行
    paths:['selectedAlarm']
  }
```
 
 




