https://pinia.esm.dev/ssr/nuxt.html#nuxt-js
## 前提
[[📜2021-11-02 Nuxt Bridgeを使ってNuxt2のTypeScriptプロジェクトでVuetifyとComposition APIを動かしてみる]] の環境があること。
## [[Pinia]]のインストール
[[Nuxt Bridge]]なので[[Nuxt Composition API]]は不要なはず..。
```console
npm install pinia @pinia/nuxt
```
`nuxt.config.js`に追加。[[Nuxt Composition API]]は使わないので`'@nuxtjs/composition-api/module'`は追加しない。追加すると競合エラーになる。
```js:nuxt.config.js
buildModules: [
['@pinia/nuxt', { disableVuex: true }],
],
```
## Storeの定義
`stores/counter.ts`という名前で作成する。
```ts:stores/counter.ts
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
counter: 0,
name: 'tadashi-aikawa',
}),
getters: {
doubleCount: (state) => state.counter * 2,
doubleCountPlusOne(): number {
return this.doubleCount * 2 + 1
},
},
actions: {
plus() {
this.counter++
},
reset() {
this.counter = 0
},
},
})
```
## Storeの利用
簡単な動作確認スクリプトを作る。
```ts:index.vue
<script lang="ts" setup>
import { userCounterStore } from '~/stores/counter'
const counter = useCruserCounterStore()
const plus = () => {
counter.plus()
}
</script>
<template>
<div>
<span>{{ counter.name }}</span>
<span>{{ counter.counter }}</span>
<span>{{ counter.doubleCount }}</span>
<span>{{ counter.doubleCountPlusOne }}</span>
<v-btn @click="plus">plus</v-btn>
</div>
</template>
```
こんな感じに動けばOK。もちろん他の`vue`ファイルからでも利用できる。
![[Notes/attachments/2021-11-07.gif]]
## トラブル
- [[Nuxt Bridge x Pinia x TypeScript で useXXXStoreで取得した変数の型がtemplate内で推論されない]]
## 参考
- [piniajs/example\-nuxt\-bridge: Example of Pinia with Nuxt Bridge](https://github.com/piniajs/example-nuxt-bridge)