pinia

預期結果:

• Use a Pinia plugin to synchronize state with localStorage:
•  
• ```ts
• import { defineStore } from 'pinia'
• import { watch } from 'vue'
•  
• export const useCounterStore = defineStore('counter', {
• state: () => ({ count: 0, name: 'Eduardo' }),
• })
•  
• // Watch for changes and persist to localStorage
• watch(
• useCounterStore(),
• (state) => {
• localStorage.setItem('counter', JSON.stringify(state))
• },
• { deep: true }
• )
• ```

預期結果:

• **Option Stores** use an object with properties like state, getters, and actions:
•  
• ```ts
• export const useCounterStore = defineStore('counter', {
• state: () => ({ count: 0 }),
• getters: { doubleCount: (state) => state.count * 2 },
• actions: { increment() { this.count++ } }
• })
• ```
•  
• **Setup Stores** use a function returning refs and functions:
•  
• ```ts
• export const useCounterStore = defineStore('counter', () => {
• const count = ref(0)
• const doubleCount = computed(() => count.value * 2)
• function increment() { count.value++ }
• return { count, doubleCount, increment }
• })
• ```

預期結果:

• Use setActivePinia and createPinia with beforeEach:
•  
• ```ts
• import { setActivePinia, createPinia } from 'pinia'
•  
• beforeEach(() => {
• const pinia = createPinia()
• setActivePinia(pinia)
• })
•  
• it('resets state', () => {
• const store = useCounterStore()
• store.count = 5
• // Reset for next test
• store.$reset()
• expect(store.count).toBe(0)
• })
• ```