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

---

搭配特別好用插件 Icônes
https://next.vuetifyjs.com/en/features/icon-fonts/
以下兩方法vuetify均可生成按鈕

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

## 初始:


建立要的變數

## 導入變數

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

### 版本二:解構
(忽略第二個Import )
就麻煩所有要用的都要在最下行先打一次

---

### pinia 變數/getters /actions

[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

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

export default pinia

3. store/xxx.js

 state() {
    return {
        selectedAlarm: 1,
      }
  },
    //   跟state同層級
  persist:{
    key:'pomodoro-settings',
//         如果只要訂某資料，加下行
    paths:['selectedAlarm']
  }