vue35 Vue3 ) script setup 내가 Pinia를 Vue3의 script setup으로 사용할 때, 쓰는 법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 // store.js import { defineStore } from 'pinia'; import { ref } from 'vue'; export const useStore = defineStore('store', () => { const count = ref(0); const increase = (n = 1) => { count.value += n; }; const reset = () => { count.value = 0; }; return { count, increase, reset }; }); Colored by Color Scripter cs chrome의.. 2023. 3. 28. Pinia - Action ( Option Store ) 이 글은 Vue 3의 공식 Store | Pinia 를 보고 정리한 글입니다. 더 자세한 내용을 원하시면 공식 문서를 참고하세요. 컴포넌트의 method와 동일한 일을 합니다. 이들은 defineStore()에서 actions속성으로 정의할 수 있으며, 처리해야 할 작업의 로직을 정의하는데 완벽합니다 : export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { // `this`에 의존하므로, 화살표 함수를 사용할 수 없음. increment() { this.count++ }, randomizeCounter() { this.count = Math.round(100 * Math.random().. 2023. 1. 2. Pinia - Getter ( Option Store ) 이 글은 Vue 3의 공식 Store | Pinia 를 보고 정리한 글입니다. 더 자세한 내용을 원하시면 공식 문서를 참고하세요. Store 상태에 대한 계산된 값과 정확히 동일합니다.defineStore()내에서 getters 속성으로 정의할 수 있습니다. 화살표 함수의 사용을 권장하기 위해, 첫 번째 인자로 state를 받습니다: export const useCounterStore = defineStore('counter',{ state: () => ({ count : 0, }), getters: { doubleCount: (state) => state.count * 2, }, }) 대부분, Getter는 오직 State에만 의존하지만, 다른 getter를 사용해야 할 수도 있습니다. 이 때문에 일반.. 2023. 1. 2. Pinia - State ( Option Store ) 이 글은 Vue 3의 공식 Store | Pinia 를 보고 정리한 글입니다. 더 자세한 내용을 원하시면 공식 문서를 참고하세요. Pinia에서 상태는 초기 상태를 반환하는 함수로 정의됩니다. 이를 통해 Pinia는 Server측과 Client측 모두에서 작동할 수 있습니다. mport { defineStore } from 'pinia' export const useStore = defineStore('storeId', { // 화살표 함수는 전체 유형 유추을 위해 권장됨. state: () => { return { // 이 모든 속성은 자동으로 유형이 유추됨. count: 0, name: 'Eduardo', isAdmin: true, items: [], hasChanged: true, } }, }) V.. 2023. 1. 2. 이전 1 2 다음