第十五章：Pinia —— 市政总台账

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

export const useDistrictStore = defineStore('district', () => {
  const districtName = ref('新城区 A');
  const shops = ref([
    { id: 1, name: 'Vue 书店', open: true },
    { id: 2, name: 'Pinia 咖啡馆', open: false },
  ]);

  const openCount = computed(() => shops.value.filter(s => s.open).length);

  function toggleShop(id: number) {
    const target = shops.value.find(s => s.id === id);
    if (target) target.open = !target.open;
  }

  return {
    districtName,
    shops,
    openCount,
    toggleShop,
  };
});

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useDistrictStore } from '@/stores/district';

const store = useDistrictStore();
const { districtName, shops, openCount } = storeToRefs(store);
const { toggleShop } = store;
</script>