Web Design Leaves

//pinia から defineStore をインポート
import { defineStore } from 'pinia'

// defineStore() の戻り値に名前 useXxxxStore を付けてエクスポート（named export）
export const useMainStore = defineStore('main', {
  // オプションの設定
})

<script setup>
import { useCounterStore } from '@/stores/counter'
//分割代入を使ってプロパティを取得
const { count, doubleCount, increment } = useCounterStore()
</script>

<template>
  <h2>Pinia Sample</h2>
  <p>count: {{ count }}</p>
  <p>doubleCount: {{ doubleCount }}</p>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
//定義したストアをインポート
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    //ストアのインスタンスを生成
    const store = useCounterStore()
    //ストアのインスタンスを介して state にアクセスして直接プロパティを操作可能
    store.count++
    store.name = 'Foo'
    store.items.pop()
    store.hasChanged = true

    //テンプレートで使用するストアのインスタンスを返す
    return {
      store,
    }
  },
}
</script>

<template>
  <h2>Pinia Sample</h2>
  <!-- ストアのインスタンスを介して state にアクセス -->
  <p>count : {{ store.count }}</p>
  <p>name : {{ store.name }}</p>
  <div>items :
    <ul>
      <li v-for="item in store.items">{{ item }}</li>
    </ul>
  </div>
  <p>hasChanged : {{ store.hasChanged }}</p>
</template>

//ストアのインスタンスを生成
const store = useStore()
//$reset() メソッドを使って state の値を全て初期値に戻す
store.$reset()

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Foo',
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
</script>

<template>
  <h2>Pinia Sample</h2>
  <p>count: {{ store.count }}</p>
  <p>doubleCount: {{ store.doubleCount }}</p>
  <div>
    <button @click="store.increment">Increment</button>
  </div>
  <p>name: {{ store.name }}</p>
  <input v-model="store.name"/>
  <div>
    <button @click="store.$reset">Reset</button>
  </div>
</template>

<script setup>
import PiniaSample from '@/components/PiniaSample.vue'
</script>

<template>
  <PiniaSample />
</template>

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Foo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, name, doubleCount, increment }
})

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Foo')
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }
  // count をリセットする関数を定義
  function resetCount() {
    count.value = 0;
  }

  return { count, name, doubleCount, increment, resetCount }
})

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
// $patch を使ったメソッドを定義してテンプレートで呼び出す
const reset = () => {
  store.$patch({
    count: 0,
    name: 'Foo',
  })
};
</script>

<template>
  <h2>Pinia Sample</h2>
  <p>count: {{ store.count }}</p>
  <p>doubleCount: {{ store.doubleCount }}</p>
  <div>
    <button @click="store.increment">Increment</button>
  </div>
  <p>name: {{ store.name }}</p>
  <input v-model="store.name"/>
  <div>
    <button @click="reset">Reset</button> <!-- 定義したメソッド -->
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
// $state を使ったメソッドを定義してテンプレートで呼び出す
const reset = () => {
  store.$state = {
    count: 0,
    name: 'Foo',
  };
};
</script>

store.$patch({
  count: store.count + 1,
  age: 120,
  name: 'DIO',
})

store.$patch((state) => {
  state.items.push({ name: 'shoes', quantity: 1 })
  state.hasChanged = true
})

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Foo',
    age: 33,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
//$patch() にオブジェクトを渡してまとめて複数のデータを変更
store.$patch({
  count: 100,
  name: 'Bar',
  age: 55
})
</script>

<template>
  <h2>Pinia Sample</h2>
  <p>count: {{ store.count }}</p> <!-- 100 -->
  <p>doubleCount: {{ store.doubleCount }}</p><!-- 200 -->
  <div>
    <button @click="store.increment">Increment</button>
  </div>
  <p>name: {{ store.name }}</p><!-- Bar -->
  <p>age: {{ store.age }}</p><!-- 55 -->
  <input v-model="store.name"/>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()
//まとめて複数のデータを変更する関数
const changeState = () => {
  store.$patch({
    count: 100,
    name: 'Bar',
    age: 55
  })
}
</script>

<template>
  <h2>Pinia Sample</h2>
  <p>count: {{ store.count }}</p>
  <p>doubleCount: {{ store.doubleCount }}</p>
  <div>
    <button @click="store.increment">Increment</button>
  </div>
  <p>name: {{ store.name }}</p>
  <p>age: {{ store.age }}</p>
  <input v-model="store.name"/>
  <div>
    <button @click="changeState">Change</button><!-- 定義した関数を呼び出すボタン -->
  </div>
</template>

//$state にオブジェクトを代入してまとめて複数のデータを変更
store.$state = {
  count: 7,
  name: 'Qux',
  age: 3
}

store.$patch({
  count: 7,
  name: 'Qux',
  age: 3
})

// state の変化を監視
store.$subscribe((mutation, state) => {
  // state の変化を検知したときに実行する処理（コールバック）
})

const unsubscribe = store.$subscribe((mutation, state) => {
  //...
})

//関数を実行して監視をキャンセル（停止）
unsubscribe()

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Foo',
    age: 33,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()

//$subscribe メソッドを使って、state の変化を監視
store.$subscribe((mutation, state) => {
  //$subscribe が呼び出されたら、引数の内容を出力
  console.log(mutation)
  console.log(state)
})

// state を $patch() で変更する関数
const changeStateFunction = () => {
  // $patch() に関数を渡して変更
  store.$patch((state) => {
    state.count = 100
    state.name = 'Bar'
    state.age = 55
  })
}
// state を $patch() で変更する関数
const changeStateObject = () => {
  // $patch() にオブジェクトを渡して変更
  store.$patch({
    name: 'Baz',
    age: 7
  })
}
</script>

<template>
  <h2>Pinia Sample</h2>
  <p>count: {{ store.count }}</p>
  <p>doubleCount: {{ store.doubleCount }}</p>
  <div>
    <button @click="store.increment">Increment</button>
  </div>
  <p>name: {{ store.name }}</p>
  <p>age: {{ store.age }}</p>
  <input v-model.lazy="store.name"/>
  <div>
    <button @click="changeStateFunction">Patch (Function)</button>
    <button @click="changeStateObject">Patch (Object)</button>
  </div>
</template>

store.$subscribe((mutation, state) => {
  // state が変化するたびに、state 全体をローカルストレージに保存して持続化
  localStorage.setItem(mutation.storeId , JSON.stringify(state))
  // 保存した内容をコンソールに出力（こちらで追加した部分）
  console.log('Local Storage: ' + localStorage.getItem(mutation.storeId))
})

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    // 他のゲッターを利用するゲッター（メソッド定義の短縮構文）
    doublePlusOne() {
      // 他のゲッターを this を介して参照
      return this.doubleCount + 1
    },
  },
})

getters: {
  // automatically infers the return type as a number
  doubleCount(state) {
    return state.count * 2
  },
  // TypeScript の場合は、明示的に戻り値の型を指定
  doublePlusOne(): number {
    return this.doubleCount + 1
  },
},

getters: {
  // 以下は this を使用していないため、型は自動的に推測されます
  doubleCount: (state) => state.count * 2,
  // JSDoc で型を示す
  /**
    * Returns the count value times two plus one.
    *
    * @returns {number}
    */
  doubleCountPlusOne() {
    return this.doubleCount + 1
  },
},

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', ()=> {
  const count = ref(10)
  const doubleCount = computed(() => count.value * 2)
  // doubleCount の値を doubleCount.value で参照
  const doublePlusOne = computed(() => doubleCount.value + 1)
  return { count, doubleCount, doublePlusOne }
})

import { defineStore } from 'pinia'

export const useUsersStore = defineStore('users', {
  state: () => ({
    users: [
      { id: '001', name: 'Foo', age: 20 },
      { id: '002', name: 'Bar', age: 30 },
      { id: '003', name: 'Baz', age: 10 },
    ],
  }),
  getters: {
    getUserById: (state) => {
      //引数を受け取る関数を返す
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})

<script setup>
import { useUsersStore } from '@/stores/users'
const store = useUsersStore()
//ゲッターから関数を取得
const getUserById = store.getUserById
</script>

<template>
  <h2>Pinia Sample</h2>
  <!-- ゲッターから取得した関数 getUserById() に引数を渡す -->
  <p>User 002: {{ getUserById('002').name  }}</p>
</template>

export const useStore = defineStore('main', {
  getters: {
    getActiveUserById(state) {
      const activeUsers = state.users.filter((user) => user.active)
      return (userId) => activeUsers.find((user) => user.id === userId)
    },
  },
})

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})

import { defineStore } from 'pinia'
//別のストアをインポート
import { useCounterStore } from './counter'

export const useUsersStore = defineStore('users', {
  state: () => ({
    users: [
      { id: '001', name: 'Foo', age: 20 },
      { id: '002', name: 'Bar', age: 30 },
      { id: '003', name: 'Baz', age: 10 },
      { id: '004', name: 'Qux', age: 7 },
    ],
  }),
  getters: {
    //別のストアのゲッターを利用するゲッター
    userByCounter(state) {
      //使用する別のストアを生成
      const counterStore = useCounterStore()
      //別のストアのゲッターを利用
      return state.users[counterStore.doubleCount]
    },
  },
})

<script setup>
import { useCounterStore } from '@/stores/counter'
import PiniaSample from '@/components/PiniaSample.vue'
const store = useCounterStore()
</script>

<template>
  <button @click="store.increment">Increment</button>
  <PiniaSample />
</template>

<script setup>
import { useUsersStore } from '@/stores/users'
const store = useUsersStore()
</script>

<template>
  <h2>Pinia Sample</h2>
  <p>User : {{store.userByCounter.name }}</p> <!-- User : Foo -->
</template>

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    getRandomNumber(num) {
      return Math.round((num -1) * Math.random()) + 1
    },
    //上記のアクション getRandomNumber を利用して定義
    randomizeCounter() {
      this.count = this.getRandomNumber(100)
    },
    resetCounter() {
      this.count = 0
    },
  },
})

import { defineStore } from 'pinia'

export const usePostsStore = defineStore('posts', {
  state: () => ({
    posts: [],
    error: null,
  }),
  actions: {
    //非同期アクション
    async fetchPosts() {
      this.posts = []
      // レスポンスを取得
      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
      if (response.ok) {
        // response が ok であれば、取得したレスポンスを json に変換して this.posts へ
        this.posts = await response.json()
      } else {
        // response が ok でない場合
        this.error = response.status
        console.warn(`リクエスト失敗 status code:${response.status}`)
      }
    },
  },
})

<script setup>
import { usePostsStore } from '@/stores/posts'
const store = usePostsStore()
//非同期アクションを実行して投稿のリソースを取得
store.fetchPosts()
</script>

<template>
  <h2>Post Titles</h2>
  <p v-if="store.error">Error: {{ store.error }}</p>
  <ul v-if="!store.error">
    <li v-for="post in store.posts" :key="post.id">
       {{ post.title }}
    </li>
  </ul>
</template>

import { defineStore } from 'pinia'
//別のストアをインポート
import { useCounterStore } from './counter'

export const usePostsStore = defineStore('posts', {
  state: () => ({
    post: null,
    error: null,
  }),
  actions: {
    //アクションの定義
    async fetchRandomPost() {
      this.post = null
      //使用する別のストアを生成
      const counterStore = useCounterStore()
      //別のストアのアクションを利用して ID を生成
      const id = counterStore.getRandomNumber(100);
      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
      if (response.ok) {
        this.post = await response.json()
      } else {
        this.error = response.status
        console.warn(`リクエスト失敗 status code:${response.status}`)
      }
    }
  },
})

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    // ・・・中略・・・
    getRandomNumber(num) {
      //与えられた引数をもとにランダムな整数を返す
      return Math.round((num -1) * Math.random()) + 1
    },
  },
})

<script setup>
import { usePostsStore } from '@/stores/posts'
const store = usePostsStore()
//非同期アクションを実行して投稿のリソースを取得
store.fetchRandomPost()
</script>

<template>
  <h2>Random Post</h2>
  <div v-if="store.post">
    <h3> {{ store.post.title }}</h3>
    <p>{{ store.post.body }}</p>
  </div>
</template>

const unsub = store.$onAction( ({ name, store, args, after, onError, }) => {
    // コールバックを定義
    //アクションが実行される前に実行される処理（例えば、ローダーの表示など）

    // 引数の after を使ってアクション完了時に実行される関数を定義
    after((result) => { // result はアクションの戻り値
      //アクションが完了した場合に実行される処理
    })

    // 引数の onError を使ってエラーになった場合に実行される関数を定義
    onError((error) => {
      //アクションがエラーになった場合に実行される処理
    })
  }
)

<script setup>
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore()

store.$onAction((params) => {
  //コールバックが受け取る引数を出力
  console.log(params)
})
</script>
              

<script>
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    //ストアを生成
    const store = useCounterStore()

    //アクションを監視（監視を停止する関数を変数 unsub に格納）
    const unsub = store.$onAction(
      ({
        name, // アクションの名前
        store, // ストアのインスタンス
        args, // アクションに渡されたパラメータの配列
        after, // アクション完了時に実行されるフック
        onError, // アクションがエラーになった場合に実行されるフック
      }) => {
        // この監視で使う変数を定義
        const startTime = Date.now()
        // ここに記述された処理はアクションが実行される前に実行されます
        console.log(`Start "${name}" with params [${args.join(', ')}].`)

        // 以下の after フックに記述された処理は、アクションが成功（完了）した場合に実行されます
        // プロミスが返される場合は待ちます
        // 引数の result はアクションの戻り値です
        after((result) => {
          console.log(
            `Finished "${name}" after ${
              Date.now() - startTime
            }ms.\nResult: ${result}.`
          )
        })

        // 以下の onError フックはアクションがエラーになった場合に実行されます
        onError((error) => {
          console.warn(
            `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
          )
        })
      }
    )
    //監視を停止する関数を使用する場合は unsub も返します
    return {
      store, unsub
    }
  },
}
</script>

<template>
  <h2>Pinia Sample</h2>
  <p>store.count : {{ store.count }}</p>
  <div>
    <button @click="store.increment">Increment</button>
    <button @click="store.randomizeCounter">Randomize</button>
    <button @click="store.resetCounter">Reset</button>
    <button @click="store.getPostCount">Posts Count</button>
    <button @click="unsub">Stop $onAction</button>
  </div>
</template>

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(99 * Math.random()) + 1
    },
    resetCounter() {
      this.count = 0
    },
    //Promise を返す関数
    async getPostCount() {
      const response = await fetch(`https://jsonplaceholder.typicode.com/posts`)
      const userPosts = await response.json()
      const postCount = userPosts.length
      return Promise.resolve(postCount);
      //return postCount
    }
  },
})

<script setup>
import PiniaSample from '@/components/PiniaSample.vue'
</script>

<template>
<PiniaSample />
</template>

pinia.use( () => {
  return { hello: 'world' }
})

//または pinia.use(() => ({ hello: 'world' }))

//分割代入でストアを引数に受け取り、ストアに直接プロパティを設定
pinia.use(({ store }) => {
  store.hello2 = 'universe'
})

pinia.use(({ store }) => {
  store.hello2 = 'universe'
  // dev モードの場合
  if (process.env.NODE_ENV === 'development') {
    store._customProperties.add('hello2')
  }
})

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()

//カスタムプロパティを追加
pinia.use( () => {
  return { hello: 'world' }
})
//ストアに直接カスタムプロパティを追加（Devtools で表示）
pinia.use(({ store }) => {
  store.hello2 = 'universe'
  if (process.env.NODE_ENV === 'development') {
    store._customProperties.add('hello2')
  }
})
//ストアをコンソールへ出力
pinia.use(({ store }) => {
  console.log(store)
})

const app = createApp(App)
app.use(pinia)
app.mount('#app')

//全てのストアのステートの title を変更（上書き）
pinia.use( ({ store }) => {
  store.title = 'Title by plugin'
})

//全てのストアのステートの models の最後の要素を取り除く
pinia.use(({ store }) => {
  store.models.pop()
})

pinia.use(({ store }) => {
  //models プロパティが存在すれば
  if(store.models) {
    store.models.pop()
  }
})

// ref と toRef を追加でインポート
import { createApp, ref, toRef } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()

pinia.use( ({ store }) => {
  // ref() で設定する値をリアクティブに
  const message = ref('The message from Plugin')
  // store.$state にプロパティを追加してリアクティブな値を設定
  store.$state.message = message
  // store にも同様にプロパティを追加してリアクティブな値を設定
  store.message = message
  // 上記は以下のように記述することもできます
  // store.message = toRef(store.$state, 'message')

  //以下は確認用のためのコンソールへの出力
  console.log(store)
})

const app = createApp(App)
app.use(pinia)
app.mount('#app')

<script>
import { useCityStore } from '@/stores/city'
import { useGuitarStore } from '@/stores/guitar'
import { usePianoStore } from '@/stores/piano'
export default {
  setup() {
    const cityStore = useCityStore()
    const guitarStore = useGuitarStore()
    const pianoStore = usePianoStore()
    return {
      cityStore,
      guitarStore,
      pianoStore
    }
  }
}
</script>

<template>
  <h1>App</h1>
  <h2>{{ cityStore.message}}</h2>
  <h2>{{ guitarStore.message}}</h2>
  <h2>{{ pianoStore.message}}</h2>
</template>

pinia.use( ({ store }) => {
  if(!store.message) {
    const message = ref('The message from Plugin')
    store.$state.message = message
    store.message = message
  }
})

pinia.use( ({ store }) => {
  if(store.message) {
    throw new Error(`${store.$id} store already has "message" property`)
  }else{
    const message = ref('The message from Plugin')
    store.$state.message = message
    store.message = message
  }
})

import { defineStore } from 'pinia'

export const useCityStore = defineStore('city', {
  state: () => ({
    title: 'City Store',
    cities:['Tokyo', 'Osaka', 'Kyoto'],
    nation: 'Japan',
  }),
  getters: {
    upperCaseTitle: (state) => state.title.toUpperCase()
  },
  actions: {
    addCity(city) {
      if(!city) return
      this.cities.push(city)
    }
  },
  //新たにオプションオブジェクトを作成（追加）
  usePlugin: true,
})

pinia.use( ({ options }) => {
  console.log(options)
})

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCityStore = defineStore('city', () => {
  const title = ref('City Store')
  const cities = ref(['Tokyo', 'Osaka', 'Kyoto'])
  const nation = ref('Japan')
  const upperCaseTitle = computed(() => title.value.toUpperCase())
  const addCity = (city) => {
    if(!city) return
    cities.value.push(city)
  }
  return { title, cities, nation, upperCaseTitle, addCity }
},
//新たにオプションオブジェクトを作成（追加）
{ usePlugin: true, }
)

import { createApp, ref, toRef } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()

pinia.use( ({ store, options }) => {
  //オプションの usePlugin が true の場合 message を追加
  if(options.usePlugin) {
    const message = ref('The message from Plugin')
    store.$state.message = message
    store.message = message
  }
})

const app = createApp(App)
app.use(pinia)
app.mount('#app')

//全てのストアに $subscribe と $onAction を設定
pinia.use(({ store }) => {
  store.$subscribe((mutation, state) => {
    console.log('$subscribe by Plugin: store = ' + mutation.storeId)
  })
  store.$onAction(({ name, store }) => {
    console.log('$onAction by Plugin: store = ' + store.$id + '| action = '+name)
  })
})

<button @click="cityStore.addCity('Nagano')">Add City</button>
<button @click="guitarStore.addModel('Les Paul')">Add Model</button>