후니후니

Pinia Actions 이번 포스팅에서는 Pinia의 Actions에 대해서 다룰 예정이다. 공식문서에 나와 있는 예제는 아래와 같다. 예제 코드를 먼저 보자. export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { // since we rely on `this`, we cannot use an arrow function increment() { this.count++ }, randomizeCounter() { this.count = Math.round(100 * Math.random()) }, }, }) defineStore 함수 내부에 actions를 통해서 함수를 등록할 수 있다...

Getters 이번 포스팅에서는 Pinia의 Getters에 대해 알아보고자 한다. Pinia 자체가 Vuex & Composition API와 문법이 매우 비슷해서 문법 자체는 크게 어렵지 않은 것 같다. export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name:'ethan' }), getters: { doubleCount: state => state.count * 2 }, }) export const useCounterStore = defineStore('counter', () => { const count = ref(2); const name = ref('ethan'); const doubleCount..

Pinia의 State 사용 방법 Vuex를 사용할 때는 state의 상태 값을 mutation을 통해 변경해줘야 했으며, 직접적으로 state의 값을 변경하는 경우 오류를 발생시킨다. Vuex와 다르게 Pinia는 mutation이 없는데, state를 어떻게 변경하는지 알아보자. export const useCounterStore = defineStore('counter', () => { const count = ref(2); const name = ref('ethan'); const doubleCount = computed(() => count.value * 2); function increment () { // Change state value count.value++ }; return { cou..

Pinia란? Vue 버전 2를 사용할 때는 주로 상태 관리를 Vuex로 처리했는데, Vue3 or Composition API이 출시되면서 Pinia라는 상태 관리 모듈이 추가되었다. Vuex의 단점으로는 TS와 같이 설계하기가 어려움이 있었는데 (문법이나 Type 등에서), 이 점이 많이 개선되었다고 한다. 그 외에도 장점이 꽤 많은 것 같은데, 공식 문서를 기반으로 Pinia의 장점은 무엇이 있는지 알아보자. 공식 문서 소개 페이지에 있는 내용이다. 직관적이고, 안전하고, Devtools 지원에, 확장, 모듈식, 가벼움 등등의 장점이 적혀있다. 이 내용만 보고서는 Vuex와 비교 했을 때 정확히 어떤 차이가 있고 어느 정도 더 좋은지 알기 어려운듯 싶다. 직접 사용해보면서 겪어보자! // npm i..