Learn Vue 3: Step By Step, Ep 27 - Build and Fill a Team Store - https://laracasts.com/series/learn-vue-3-step-by-step/episodes/27

team.json

{
  "name": "Smiley",
  "spots": 5,
  "members": [
    {
      "name": "John Doe",
      "email": "[email protected]",
      "status": "Active"
    },
    {
      "name": "Sarah Doe",
      "email": "[email protected]",
      "status": "Active"
    },
    {
      "name": "Steve Doe",
      "email": "[email protected]",
      "status": "Active"
    },
    {
      "name": "Jen Doe",
      "email": "[email protected]",
      "status": "Active"
    },
    {
      "name": "Joe Doe",
      "email": "[email protected]",
      "status": "Active"
    }
  ]
}

TeamStore.js

import { defineStore } from "pinia";

export let useTeamStore = defineStore('team', {
  state: () => ({
    name: '',
    spots: 0,
    members: []
  }),

  actions: {
    async fill() {
      let r = await import('@/team.json');

      this.$state = r.default;
    },

    grow(spots) {
      this.spots = spots;
    }
  },

  getters: {
    spotsRemaining() {
      return this.spots - this.members.length;
    }
  }
});

TeamView.vue

<script setup>
import TeamHeader from "@/components/Teams/TeamHeader.vue";
import TeamMembers from "@/components/Teams/TeamMembers.vue";
import TeamFooter from "@/components/Teams/TeamFooter.vue";
import { useTeamStore } from "@/stores/TeamStore";

let team = useTeamStore();

team.fill();

// Example of calling a store action.
setTimeout(() => {
  team.grow(25);
}, 2000);
</script>

<template>
  <TeamHeader />

  <div class="place-self-center flex flex-col gap-y-3" style="width: 725px">
    <TeamMembers />
  </div>

  <TeamFooter />
</template>