후니후니

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..

Vuex Store 모듈을 쉽게 관리하는 방법 예전에는 Store를 하나 추가한다고 하면, modules 폴더 안에 store.js 파일을 추가하고, store 폴더 안에 있는 index.js에 추가한 스토어.js를 추가해줘야했다. 어려운 작업은 아니나, 귀찮은 작업임은 맞고 언젠가 이런 부분에 대해 리팩토링이 필요하다 생각했다. 그래서 알아보니, 이미 아래와 같이 사용하는 코드가 있었다. // modules 폴더 안에 index.js import camelCase from 'lodash/camelCase'; // 현재 폴더안에 js 파일을 모두 찾는다. // 하위 폴더는 없기 때문에 false로 설정. const requireModule = require.context('.', false, /\.js$..

✏️React를 경험해보자 6탄 Redux의 흐름부터 파악을 해야 할 것 같다. 저번에 createStoreWithMiddleware 함수를 통해 store를 생성했고, reducer라는 인자를 넘겨주었다. // user_reducer.js import { LOGIN_USER } from "../_actions/types"; export default function (state = {}, action) { switch (action.type) { case LOGIN_USER: return { ...state, loginSuccess: action.payload }; default: return state; } } // reducers/index.js import { combineReducers } fr..