Pinia لـ Vue: defineStore وstoreToRefs

ما هي Pinia؟

تثبيت Pinia

npm install pinia

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

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

defineStore — أسلوب Composition API

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

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

defineStore — أسلوب Options

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubled: (state) => state.count * 2,
  },
  actions: {
    increment() { this.count++; },
    async fetchAndSet(id: string) {
      this.count = await fetchCount(id);
    }
  }
});

استخدام مخزن في مكوّن

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

const store = useCounterStore();
</script>

<template>
  <p>{{ store.count }}</p>
  <button @click="store.increment">+</button>
</template>

storeToRefs — التفكيك الآمن

import { storeToRefs } from 'pinia';

const store = useCounterStore();

// Actions can be destructured normally (they're functions):
const { increment } = store;

// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);

$patch — التحديثات المجمّعة

store.$patch({
  count: 10,
  name: 'Updated'
});

// Or with a function for complex logic:
store.$patch(state => {
  state.items.push(newItem);
  state.total += newItem.price;
});

$subscribe — مراقبة تغيّرات المخزن

إضافات Pinia

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

Pinia DevTools

مخازن متعددة

تحقق سريع

مراجعة: Pinia