반응형 Framework43 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. http통신 연습(vue) 라이프 사이클 연습 아님 post, get 단순 버튼 사용 식 연습 api는 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2022, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com //App.vue [get] //PostList.vue Load Posts {{ errMessage }} {{ post.id }} {{ post.ti.. 2023. 1. 9. 이전 1 2 3 4 5 ··· 11 다음 728x90 반응형
