npm install pinia  # 或 yarn add pinia

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

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)  // 關(guān)鍵！全局啟用Pinia
app.mount('#app')

// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  // 1. 定義狀態(tài)（相當(dāng)于data）
  const count = ref(0)
  
  // 2. 定義計(jì)算屬性（相當(dāng)于getters）
  const doubleCount = computed(() => count.value * 2)
  
  // 3. 定義操作方法（相當(dāng)于actions）
  function increment() {
    count.value++
  }

  // 暴露狀態(tài)與方法
  return { count, doubleCount, increment }
})

<script setup>
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore() // 實(shí)例化Store
</script>

   <template>
     <div>
       <p>當(dāng)前計(jì)數(shù)：{{ counterStore.count }}</p>
       <p>雙倍計(jì)數(shù)：{{ counterStore.doubleCount }}</p>
       <button @click="counterStore.increment()">+1</button>
     </div>
   </template>

npm install pinia-plugin-persistedstate

// main.js
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
pinia.use(piniaPluginPersistedstate)

defineStore('counter', () => { /* ... */ }, {
  persist: {
    enabled: true,  // 開啟持久化
    storage: sessionStorage,  // 可選存儲(chǔ)方式（默認(rèn)localStorage）
    paths: ['count']  // 指定需持久化的字段
  }
})