[Vue 3] Vue Store 사용법

준비사항

1. 뷰 프로젝트 생성 시 Store 사용 Yes 선언

 

stores 폴더 내의 product.js 설정

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

export const useProductStore = defineStore('product', () => {
  const productList = ref([
    {name: '상품 1', imagePath: 'src/assets/product1.png', price: 10000, isFavorite: false},
    {name: '상품 2', imagePath: 'src/assets/product2.png', price: 20000, isFavorite: false},
    {name: '상품 3', imagePath: 'src/assets/product3.png', price: 30000, isFavorite: false},
    {name: '상품 4', imagePath: 'src/assets/product4.png', price: 40000, isFavorite: false},
  ])

 
  const updateFavorite = function(productName){
    productList.value.map((product) => {
      if(product.name === productName){
        product.isFavorite = !product.isFavorite
        console.log(product)
      }
      // return product
    })
  }
  return { productList, updateFavorite}
})

 

export const use파일명Store = define('파일명', () => { // 꼭 파일명으로 할 필요는 없지만 권장

 

내부에서 배열과 함수들을 선언하고 밖에서 사용하기위해 const 변수들을 return 해준다.

 

사용시

<script setup>
import { RouterLink, RouterView } from 'vue-router'; // 라우터 설정

import { useProductStore } from '@/stores/products';

const store = useProductStore();
</script>

스크립트 내에서 관련 설정을 해준뒤

<template>
  <div class="app-container">
    <div class="app-nav">
      <RouterLink :to="{name: 'home'}">Home</RouterLink> |
      <RouterLink :to="{name: 'products'}">Products</RouterLink> |
      <RouterLink :to="{name: 'favorite'}">Favorite {{ store.doneLikeCount }}</RouterLink>
    </div>
    <div class="app-view">
      <RouterView/>
    </div>
  </div>
</template>

store.변수명으로 접근해 사용