Pinia는 Vuex 와 같은 Store 기능을 한다.
모듈화는 기본이며, Vuex와 비교했을 때 mutations가 없다.
$ npm i pinia
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')
기본이 모듈화이기때문에 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('')
}
}
})
this
를 사용한다!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>