Pinia

Pinia는 Vuex 와 같은 Store 기능을 한다.
모듈화는 기본이며, Vuex와 비교했을 때 mutations가 없다.

피니아 설치

$ npm i pinia

main.js에 연결

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './routes'
import App from './App.vue'

createApp(App)
  .use(createPinia()) // 피니아 호출
  .use(router)
  .mount('#app')

store 폴더 만들기

기본이 모듈화이기때문에 namespaced도 필요 없고 파일을 나눌 필요 없다.

// defineStore라는 이름으로 pinia에서 import
import { defineStore } from 'pinia'

// 이름을 가지는 내보내기 보통 use를 앞에다가 붙임(필수x)
export const useMessageStore = defineStore({
  state: () => ({
    message: 'Hello, world!'
  }),
  getters: {
    // 기존 메세지 데이터를 계산한다
    reversedMessage(state) {
      return state.message.split('').reverse().join('')
    }
  },
  actions: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

• 피니아 actions에서는 this 를 사용한다!
• mutations가 없어서 여기 저기서 수정 가능!

위에서 정의한 로직을 vue파일에서 사용해보기

mapState 가져오기 → computed에 …mapState로 연결

<template>
  <h1>About!</h1>
  <RouterLink to="/about/name">
    Name~
  </RouterLink>
  <RouterView />
  <div>  {{ message }}</div>
  <div>{{ reversedMessage }}</div>
  <button @click="reverseMessage">
    Reverse!!!!
  </button>
</template>

<script>
import { mapState, mapActions } from 'pinia'
import { useMessageStore } from '~/store/message'

export default {
  computed: {
    ...mapState(useMessageStore, [
      'message',
      'reversedMessage'
      ])
    },
    methods: {
      ...mapActions(useMessageStore, ['reverseMessage']),
    }
  }
</script>

• Reverse!!!! 버튼을 클릭하면 메시지가 반전 되는 구조.