게터스를 썻을 때 어느 부분에서 코딩을 편하게 할 수 있는지 볼수 있다. 게터스는 state 값을 가져오거나, 가공한 값을 불러올 때 찾는다. storeimport { createStore } from "vuex";export const store = createStore({ state : { price : 100 }, getters : { originalPrice(state){ return state.price; }, doublePrice(state){ return state.price * 2; }, triplePrice(state){ return sta..
mapMutations 사용store.jsexport const store = createStore({ state: { todoItems : storage.item() }, getters: { storedTodoItems(state){ return state.todoItems } }, mutations : { addOneItem(state,todoItem){ var obj = {completed : false , item : todoItem}; localStorage.setItem(todoItem,JSON.stringify(obj)); state.to..
Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법- state -> mapState- getters -> mapGetters- mutations -> mapMutations- actions -> mapActions store.jsexport const store = createStore({ state: { todoItems : storage.item() }, getters: { storedTodoItems(state){ return state.todoItems } }, list.vue {{ todoItem.item }}this.$store.getters.storedTodoItems 로도 접근이 ..
아 아래부분에 변경하는 부분이 있구나.. 이렇게 접근해서 변경하는구나.. this.$store.commit(함수명,인자)를 넘겨서 사용할 수 있구만.. 인자를 여러개 보내고 싶으면 저렇게 보내면 된다.payload라는 매개변수로 정의했는데 아마도 법칙이 아닐까 싶다.아 관행적으로 하는 것이 맞다고 강의에서 말한다. 바꿔도 되지만 통상적으로 사용하는 매개변수 명임.. 실제로 이렇게 store.js에 작성했다.export const store = createStore({ state: { todoItems : storage.item() }, mutations : { addOneItem(state,todoItem){ var obj = {comple..
Vuex 기술 요소- state : 여러 컴포넌트에 공유되는 데이터 data- getters : 연산된 state 값을 접근하는 속성 computed- mutaions: state 값을 변경하는 이벤트 로직 메서드 methods- actions : 비동기 처리 로직을 선언하는 메서드 aysnc methods 뭐가 다른지 싶은데 helper 함수를 쓰게 되면 편하게 쓰게 된다. import { createStore } from "vuex";export const store = createStore({ state: { headerText : 'ToDo!' }})스토어에서 이렇게 작성했고 {{ this.$store.state.headerText..
- Vuex는 ES5와 ES6 2가지 방식으로 설치 할 수 있다. ES6로 진행하겠다. npm install vuex --saveES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음.. 더 쉽게 코딩이 가능함2022년 2월 7일부터 Vuex 라이브러리를 설치할 때 아래와 같이 라이브러리 버전을 명시해야 한다.고 하는데 나는 그냥 된다..? 또 바뀐거 같다.vuex 버전 확인 방법npm list vuex https://v3.vuex.vuejs.org/kr/ Vuex가 무엇인가요? | VuexVuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를v3...
- Total
- Today
- Yesterday
- JPA
- 로그인
- 스프링공부
- 향해99
- 백엔드 개발자 역량
- 향해플러스백엔드
- React
- 인터셉터
- SpringBoot
- react실행
- 리터럴
- 백엔드 개발자 공부
- HTTP
- 향해플러스
- 항해플러스
- ArgumentResolver
- rejectValue
- thymleaf
- 예외처리
- 스프링부트
- BindingResult
- 항해99
- 컨트
- Java
- reject
- jpa api
- hypertexttransferprotocol
- Intercepter
- exception
- filter
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |