[Vue] Components & pinia 실습

각 페이지는 여러개의 컴포넌트들로 나눌 수 있음

 

/components 에 자식 파일 생성

 

- HomeView.vue

<script setup>
import {ref} from "vue";
import {useUserInfoStore} from "@/stores/counter";
import HomeChild from "@/components/HomeChild.vue";
const userInfoStore = useUserInfoStore();
</script>
<template>
  <h1>Home</h1>
  <div>count: {{userInfoStore.age }}</div>
  <button @click="userInfoStore.changeAge(9)">나이를 줄이자</button>
  <HomeChild/>
</template>

 

- HomeChild.vue

<script setup>
import GrandChild from "@/components/GrandChild.vue";
import {useUserInfoStore} from "@/stores/counter";
const userInfoStore = useUserInfoStore();

</script>
<template>
    <h2>HomeChild</h2>
    <p>{{ userInfoStore.name }}</p>
    <button @click="userInfoStore.changeName('TEST')">이름 변경</button>
    <GrandChild/>
</template>

 

- GrandChild.vue

<script setup>
import {useUserInfoStore} from "@/stores/counter";
const userInfoStore = useUserInfoStore();
</script>
<template>
    <h2>GrandChild</h2>
    <button @click="userInfoStore.changeAge(1);">한살로 돌아가자</button>
</template>

 

- /stores/counter.js

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useUserInfoStore = defineStore('userStore', ()=>{
  const name = ref("테스트");
  const age = ref(10);
  function changeName(newName){
    name.value = newName;
  }

  function changeAge(newAge){
    
    age.value = newAge;
  }
  return { name, age, changeAge, changeName}
})