익명의 개발노트

Vuex를 사용하다보면, 내가 사용하는 쪽에서 Vuex 상태관리 내용을 보고 싶을 때, 크롬 Vuex extenstion을 설치해서 확인하는데, 이 익스텐션에서 아래와 같이 Load State를 눌러가면서 확인해야하는 번거로움이 있다. 이럴때 사용하고자하는 페이지에 mapGetters를 사용하지 않아도 아래와 같이 선언을 해주면, import { mapGetters } from 'vuex'; export default { computed:{ ...mapGetters(['사용하고자하는 store이름']) }, ... } 아래와 같이 vuex bindings 라는 상태창에서 실시간으로 확인할 수 있다. 굳이 vuex 탭가서 확인할 필요가 없다.

이메일 형식을 입력하면 버튼이 파란색으로 활성화 되고, 수정하여 이메일 형식이 아니면 버튼이 회색으로 바뀌는 기능 구현 중 리랜더링이 안되는 현상에 대해 적어본다. 우선 input 값을 입력하면, 해당 입력값은 Vuex 로 저장이 되며, 부모 컴포넌트에서 Vuex에 있는 값을 불러와서 사용한다. 버튼이 파란색까지는 변하는데, 그 후 Input 창의 내용을 수정하면 버튼이 회색으로 돌아오지 않았다. Vuex까지는 데이터가 들어가는데, 부모컴포넌트에서 리랜더링이 되지 않았다. 라이프싸이클도 확인해 본 결과, 파란색 버튼이 된 경우까지만 작동하고, input창의 내용을 수정하면 라이프싸이클도 작동하지 않았다. 콘솔에는 nextTick 에러만 뜨고... 우선 Vuex내에 state 값을 객체형식으로 구현했는데,..

1. 인터페이스를 이용한 설계 방식 1) 인터페이스에서 state의 타입을 지정해준다. 2) 스토어 타입을 지정한다. 스토어 타입은 Vuex에 StoreOptions라는 내장 객체타입을 이용한다. 3) Actions의 타입은 ActionContext타입을 사용하며, 들어가는 제너릭 타입은 State, RootState 인데, 아래 예제는 하나밖에 없으므로 RootState대신 State로 지정해주어도 무방하다. import Vue from 'vue'; import Vuex, { StoreOptions, ActionContext } from 'vuex'; Vue.use(Vuex); //1.인터페이스 타입지정 interface State { count: number; } //2. 스토어 타입지정, inter..

1. 리액트의 리덕스 개념이며, 전역으로 데이터 관리를 위해서 사용함. 데이터 관리를 위해 단방향으로 관리하도록 설계되어있다. 기본적으로 store에 직접 접근하여 state 값을 변경할 수 있으나,(아래와 같이) Parent counter : {{ $store.state.counter}} + 그럴 경우 코드의 중복이 많아서 데이터에 접근할 때는 getters을 이용하여, 데이터에 접근한다. //store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export const store = new Vuex.Store({ state: { counter: 0 }, getters: { getCounter: function(state){ retu..