เริ่มต้น Pinia

import { defineStore } from 'pinia'

export const useCountersStore = defineStore('counters', {
  state: () => ({ // กำหนดข้อมูล state ที่จะเก็บใน store นี้
    count: 0
  }),
  actions: { // function ที่จะใช้ใน store นี้
    increment() {
      this.count++
    }
  }
})

<script setup>
import { RouterLink } from 'vue-router'
import { useCountersStore } from '../stores/counters' // สมมุติว่า store อยู่ที่นี่

const counters = useCountersStore()

</script>

<template>
  <div>
    <div>{{ counters.count }}</div>
    <button @click="counters.increment()">Add count</button>
  </div>
</template>

├── src
    ├── App.vue --> Root component เหมือนเดิม
    ├── router --> folder ของ router 
    │   └── index.js
    ├── stores --> folder ของ state management pinia
    │   └── user.js
    └── views
        ├── Profile.vue
        └── HomeView.vue

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    firstname: '',
    lastname: ''
  }),
  actions: {
    updateProfile(userData) {
      this.firstname = userData.firstname
      this.lastname = userData.lastname
    }
  }
})

<script setup>
import { RouterLink } from 'vue-router'
import { useUserStore } from '../stores/user'
import { onMounted, ref, watch } from 'vue'

// define user store ขึ้นมา
const user = useUserStore()

const firstname = ref('')
const lastname = ref('')
const isUpdated = ref(false)

const updateProfile = () => {
  // เรียกใช้ updateProfile ใน user store
  user.updateProfile({
    firstname: firstname.value,
    lastname: lastname.value
  })
  // บอกว่าข้อมูล up to date แล้ว
  isUpdated.value = true
}

// ดักจับเพื่อปรับตัวแปร isUpdated เป็น false เพื่อบอกว่าข้อมูลยังไม่ up to date
watch([firstname, lastname], () => {
  isUpdated.value = false
})

// เริ่มต้น เราจะนำข้อมูลจาก store เก็บเข้ามาในตัวแปรของ component ก่อน
onMounted(() => {
  firstname.value = user.firstname
  lastname.value = user.lastname
})
</script>

<template>
  <div>
    Profile page
    <div>
      <div>Firstname</div>
      <input type="text" v-model="firstname">
    </div>
    <div>
      <div>Lastname</div>
      <input type="text" v-model="lastname">
    </div>
    <div v-if="isUpdated">
      Profile update to store
    </div>
    <button @click="updateProfile()">Update profile</button>
    <div>
      <RouterLink to='/'>Go to home</RouterLink>
    </div>
  </div>
</template>

<script setup>
import { RouterLink } from 'vue-router'
import { useUserStore } from '../stores/user'

const user = useUserStore()

</script>

<template>
  <div>
    <div>
      (From profile)
      <div>Firstname: {{ user.firstname }}</div>
      <div>Lastname: {{ user.lastname }}</div>
    </div>
    <div>
      <RouterLink :to="{
        name: 'profile',
        params: { id: 1 }
      }">Go to profile</RouterLink>
    </div>
  </div>
</template>