目次 Vue 基本構造 Pinia 基本構造 State (Vue) State (Pinia) Getters (Vue) Getters (Pinia) Actions (Vue) Actions (Pinia) Vue 基本構造 基本構造説明 - Composition API 方式( 別の方式ではOption API方式がある export default{} ) <script setup> // storeを import import { useTodosStore } from '@/stores/todos' // 宣言 const todos = useTodosStore() // --- stateの値をレスポンシブで参照する方法 const { todos, count } = storeToRefs(todos) // --- actionは分割代入して使える const { increment } = todos // --- stateの修正方法3つ // 1. 修正 counter.count++ // 2. $patch 利用 counter.$patch({ count: counter.count + 1 }) // 3. action 이용 counter.increment() </script> <template> <!-- Storeのstateに直接アクセス --> <div>Current Count: {{ counter.count }}</div> </template> Pinia 基本構造 基本構造説明 Option Store方式 既存と同様state, getters, actionsを直感的に表現する stores/todos-store.js import { defineStore } from 'pinia' export const useTodosStore = defineStore('todos', { //-- storeの名前 state: () =...