owned this note
owned this note
Published
Linked with GitHub
# Nuxt3-[Pinia Plugin Persistedstate](https://prazdevs.github.io/pinia-plugin-persistedstate/)
與Pinia使用方始相同,但可以將狀態儲存在瀏覽器的cookie、sessionStorage或localStorage當中
## npm
```bash=
npm install pinia @pinia/nuxt
npm install @pinia-plugin-persistedstate/nuxt
```
## nuxt.config.js 設置
```javascript
export default {
modules: [
'@pinia/nuxt',
'@pinia-plugin-persistedstate/nuxt',
],
imports: {
// dirs:設定要auto imports的資料夾
dirs: ['stores']
},
// build: {
// transpile: ['pinia-plugin-persistedstate'],
// },
}
```
###
- errorMessage
在 Nuxt@3.7.0之後的版本遇到以下的錯誤訊息
:::spoiler
![截圖 2024-01-31 下午3.37.40](https://hackmd.io/_uploads/r1tyYuvcT.png)
:::
- 除錯方式
:::spoiler nuxt.config.js
```javascript
build: {
transpile: ['pinia-plugin-persistedstate'],
},
```
:::
- 參考資料
- [[Nuxt@3.7.0] [vite-node] [ERR_LOAD_URL] pinia-plugin-persistedstate #236](https://github.com/prazdevs/pinia-plugin-persistedstate/issues/236)
## 新建資料夾/stores/檔案名稱.js
```javascript=
import { defineStore } from 'pinia'
// 寫法一:
// export const useCounterStore = defineStore('counter', {
// state: () => ({
// message: 'Hello Word!!',
// }),
// getters: {
// doubleCount: (newText) => state.message = newText,
// },
// actions: {
// setNewText(newText) {
// this.message = newText
// },
// },
// persist: {
// storage: sessionStorage,
// }
// })
// 寫法二:
export const use檔案名稱Store = defineStore(
'Key名稱',
() =>{
const count = ref(0);
const message = ref('pinia')
const objUser = ref({
id:1,
name:'Pinia'
})
const addCount = () =>{
count.value++;
}
const setNewText = (newText) =>{
message.value = newText
}
return {
count,
message,
addCount,
setNewText
}
},
{
// 暫存器key名稱
key:'videoLoop',
// 依需求設定狀態儲存方式
persist: {
// storage: persistedState.sessionStorage,
storage:process.client ? persistedState.sessionStorage : null
},
// 依需求添加要儲存的值
paths: [
'count'
]
}
)
```
### persist配置
- Bloon
```javascript
persist: true
```
#### 預設配置
- 儲存配置:cookie
- 預設key:pinia所設置的 Key名稱
- 預設整個 state 都會被保存
- Key
```javascript
persist: {
key:'新的key名稱'
}
```
#### 說明
將pinia所設置的key在儲存時,使用新設定的key儲存
- storage
```javascript
persist: {
storage: persistedState.sessionStorage
}
```
#### 說明
使用自動引入的 `persistedState` 變數進行配置
- 可設置的內容:cookie、localStorage、sessionStorage;預設為cookie
#### 備註
因狀態儲存在瀏覽器所以在渲染時會遇到以下錯誤
- 錯誤訊息
:::spoiler error message
Hydration completed but contains mismatches.
![截圖 2024-01-30 下午1.11.57](https://hackmd.io/_uploads/SkpCBWIq6.png)
:::
- 除錯方式
- 方法一:使用 Nuxt3的<ClientOnly>元件
- 方法二:修改pinia storage配置
~~storage: persistedState.sessionStorage,~~
storage:process.client ? persistedState.sessionStorage : null
- cookiesWithOptions()
```javascript
persist: {
storage: persistedState.cookiesWithOptions({
sameSite:'strict'
})
}
```
#### 說明
選項同 [Nuxt Composable useCookie](https://nuxt.com/docs/api/composables/use-cookie#options),storage 需為 cookie 才能使用
- paths
```
persist: {
paths: [
'count'
]
}
```
- debug
設定為 true,當發生任何錯誤,都會使用 conosle.error 印出
## 使用Pinia
```htmlembedded=
<template>
<div>
<ClientOnly>
<div>
{{ counter.message }}
<button @click="counter.setNewText('This is new text.')">Update text.</button>
</div>
<div>
<p>{{ counter.count }}</p>
<button @click="counter.addCount">count++</button>
</div>
</ClientOnly>
</div>
</template>
<script setup>
const counter = use檔案名稱Store()
</script>
```
## 參考資料
- [pinia-plugin-persistedstate](https://prazdevs.github.io/pinia-plugin-persistedstate/)
- [I can't customize the persist option #218](https://github.com/prazdevs/pinia-plugin-persistedstate/issues/218)
- [Nuxt 3 控制伺服器端及客戶端的渲染執行與 ClientOnly 的使用](https://ithelp.ithome.com.tw/articles/10327918)
- [D21:Nuxt 3.x 狀態管理 State Management (3)-Pinia Plugin Persistedstate 維持狀態](https://ithelp.ithome.com.tw/articles/10332698)
###### 持續更新中!
###### 以上為自學中的筆記如有錯誤,懇請留言指正,感謝!