jiwoolee.space

지난 게시글에서는 mutations로 counter를 1씩 늘렸다 이번에는 actions를 호출해서 dispatch() 를 이용해보자 // Parents.vue Parent counter : {{ Parentscounter }} + - 지난 시간mutations을 보면 this.$store.commit("addCounter")로 counter를 1씩 늘렸다 actions에서는 this.$store.dispatch("addCounter")로 counter를 1씩 늘린다 // Parents.vue Parent counter : {{ Parentscounter }} + - mapActions도 mapGeteers, mapMutations랑 똑같이 하면 되겠지 methods: { addCounter() { th..

Helpers ( mapState, mapGetters, mapMutations, mapActions) 를 배웠으니 써야지 일단 만들어두었던 template를 다시 보자 DB info 보기 UserID Country ===================여기 이부분=================== {{ UserID[i - 1] }} {{ Country[i - 1] }} ===================여기 이부분=================== 코드셀에 표시해둔 부분을 고쳐야겠네 script를 만들어보자 우선, mapGetters, mapActions를 쓸 거니까 import부터 해주자 //myTable.vue import {mapGetters} form "vuex" import {mapActions}..

지난 게시글에서는 mapState와 mapGetters를 살펴보았다. 오늘은 mapMutations, mapActions. mapMutations: Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 쉽게 연결해주는 helper 예를 들어, // App.vue import { mapMutations } from 'vuex'; ​ methods: { ...mapMutations(['clickBtn']), authLogin() {}, displayTable() {} } ​ // store.js mutations: { clickBtn(state) { alert(state.msg); } } 라는 App.vue가 있고, template에 popup message 가 있을 때, 컴포넌트에서 버튼을 클릭하면 =..

Vuex를 하다보니 너무 어렵다 속상해하지마 Vuex의 각 속성들을 더 쉽게 사용하게 해주는 helper가 있다 store에 있는 4가지 속성의 코딩을 쉽게 도와준다 state => mapState getters => mapGetters mutations => mapMutations actions => mapActions 코딩을 쉽게 도와준다는데. 알차게 써야지. helper 사용법 helper를 사용하려고 하는 vue파일에 helper를 로딩해준다 import { mapState } from 'vuex'; import { mapGetters } from 'vuex'; import { mapMutations } from 'vuex'; import { mapActions } from 'vuex'; help..

지난 시간 state, getters, mutations 를 사용한 전체 코드 더보기 // Parents.vue Parent counter : {{ Parentscounter }} + - // Child.vue Child counter : {{ Childcounter }} + - //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){ return state.counter; } }, mutations: { addCounter: function (state){ ..

지난 게시글에 이어서 진행하자 // Parents.vue Parent counter : {{ $store.state.counter }} + - // Child.vue Child counter : {{ $store.state.counter }} + - $store.state.counter를 간단하게 바꿀거다 // Parents.vue Parent counter : {{ Parentscounter }} + - // Child.vue Child counter : {{ Childcounter }} + - 이렇게! 그러면 Parentscounter, Childcounter가 뭔지 알려줘야겠지 Parents.vue, Child.vue에 각각 computed: {}를 추가해주자 // Parents.vue // Chi..

Vuex helpers를 한번 더 이용해보자 이 예제는 캡틴 판교의 게시글에 올라와 있다 더보기 https://joshua1988.github.io/web-development/vuejs/vuex-start/ Vuex 시작하기 1 - Vuex와 State Vue 중급으로 레벨업 하기. 상태 관리란 무엇인가? Vuex를 이용한 상태 관리. state 소개 joshua1988.github.io Vuex 시작하기 1,2,3 참고 먼저 프로젝트를 만들어주고 해당 프로젝트로 이동 cd vuex_example 일단 parent component랑 child component를 만들어야지 /src/components에 각각 vue 파일을 만들어주자 //Parents.vue Parent counter : {{ coun..

프로젝트 생성 스페이스바로 선택 엔터로 다음 설정으로 이동 해당 프로젝트로 이동해 npm, yarn 명령어로 다운로드 받았다 //두 명령어 중 하나만 실행하면 됨 npm install vuex --save yarn add vuex 아무것도 없던 프로젝트에 뭐가 설치되었다. ./vuex_install/src/main.js에 Vuex를 명시적으로 추가해주어야 한다. 모듈 시스템으로 사용할거거든 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) Vuex는 promise를 필요로 한디. promise가 뭔데? 더보기 더보기 더보기 Promise: 그럼 promise를 구현하자 마찬가지로 npm, yarn 중에 하나 사용하면 된다 npm install es..