반응형 전체 글130 Actions (vuex) mutation(state를 관리, 변화 시키는 역할)은 모든 기능이 동기로 동작한다. 하나의 데이터에 여러개의 컴포넌트가 접근하려고 할 때 효율적으로 관리하기 위함인데 비동기 로직들이 포함되면 그 순서를 정확하게 알기 어렵다. 그래서 비동기 로직은 Actions를 이용한다. ex) actions의 예제 회원가입시 서버와 통신을 할때 회원가입의 중복검사, 등등의 함수를 실행한 후 state에 추가해달라는 값을 마지막에 commit한다. mutations을 통해 state를 변화시키고, 해당 mutation을 동작시키는 비지니스 로직으로 Actions를 사용한다. mutations을 commit해서(발생시킴) state의 값을 변경했다면 컴포넌트에서 Actions를 실행시키는 것은 Dispatch를 이용한.. 2023. 1. 17. getter, mapGetters, mapState (vuex) 보통의 store의 state값을 불러와서 사용할 때 v-for="(user, index) in allUsers" v-for="(user, index) in $store.state.allUsers" ... mounted() { EventBus.$on('signUp', users => { this.$store.state.allUsers.push(users) }) } 기존 data => store의 state로 옮김 getter All Users{{ $store.state.allUsers.length}} ex) 여러개의 컴포넌트에 모든 유저의 수를 출력해야 하는 경우 반복되는 코드를 computed속성과 비슷한 getter을 이용해서 코드를 줄일 수 있다. export default new Vuex.Stor.. 2023. 1. 16. mutation (vuex) state값을 변화시키는 역할을 하는 mutation *주의* mutation은 동기로 동작한다. 왜 필요한지? store내에서 state를 변화시키는 같은 기능을 하는 함수를 mutations에 넣고 그 mutations을 각각 컴포넌트에 commit을 해서 state값을 변경한다. mutations을 불러오기만 하면 되니까 코드가 간결해질 수 있다. commit: 바꾸겠다는 의사를 밝힘 //store.js export default new Vuex.Store({ state: {//data allUsers:[ {userId: 'hoza123', password: '123', name: 'Hoza', address: 'Seoul', src:'https://goo.gl/oqLfJR'}, {userId: '.. 2023. 1. 12. $ref, $refs - DOM접근(vue.js) $ref속성은 지양된다. virtual DOM을 사용할 필요성을 잃기 때문에 예외적인 경우를 제외하곤 $ref 속성은 지양해야 한다. 접근하고 싶은 태그에 ref속성명을 할당해준다. ex) [mounted] $refs는 컴포넌트가 렌더링 된 후 접근할 수 있다. dom이 부착되기 전인 beforeCreated(), created() 에서 $refs를 접근한다면 undefined가 출력되는것을 확인할 수 있다. refs를 활용한 자식 컴포넌트 DOM접근이 가능하다. https://coonihong.tistory.com/38 [Vue.js] refs를 활용한 DOM 접근 방법 이번 포스트에서는 Vue에서 제공하는 refs를 활용하여 DOM에 접근하는 방법에 대해서 다뤄보겠습니다. Refs JavaScript.. 2023. 1. 10. 이전 1 ··· 7 8 9 10 11 12 13 ··· 33 다음 728x90 반응형
