기존 store.jsimport { createStore } from "vuex";const storage = { item(){ const arr = []; if(localStorage.length > 0){ for(var i = 0; i 이제 모듈화를 할 차례이다. 나는 각각 store의 vuex 함수 단위로 모듈화 했다.mutations.jsconst addOneItem = (state,todoItem) => { var obj = {completed : false , item : todoItem}; localStorage.setItem(todoItem,JSON.stringify(obj)); state.todoItems.pu..
게터스를 썻을 때 어느 부분에서 코딩을 편하게 할 수 있는지 볼수 있다. 게터스는 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 로도 접근이 ..
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
- 향해플러스
- 예외처리
- react실행
- 스프링공부
- 향해99
- HTTP
- BindingResult
- thymleaf
- SpringBoot
- 스프링부트
- reject
- Java
- hypertexttransferprotocol
- 백엔드 개발자 역량
- React
- 컨트
- jpa api
- filter
- Intercepter
- 향해플러스백엔드
- ArgumentResolver
- rejectValue
- 백엔드 개발자 공부
- 인터셉터
- 항해99
- exception
- 항해플러스
- 로그인
- JPA
- 리터럴
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |