이안의 평일코딩

computed와 map methods vs computed 함수를 만들 때 methods :{}가 아닌 computed : {}를 사용해보자. export default { name: 'App', data(){ return { counter : 0, } }, methods: { now(){ return new Date() }, }, computed: { now2(){ return new Date() }, }, } methods 함수는 사용할 때마다 실행되지만, computed 함수는 사용해도 실행되지 않는다. 계산결과 저장용 함수로 쓸 수 있고 자원절약이 된다. {{now()}} {{counter}} {{now2}} {{counter}} // computed 함수는 이름만 쓴다 버튼 버튼을 누르면 co..

actions ajax요청과 같이 시간이 오래걸리는 것을 처리하기 위해서는 actions을 이용한다. 비동기식 처리를 지원하는 코드는 다음줄 부터 실행하려는 경향이 있기 때문에 의도치않는 버그가 생길 수 있고, 코드가 길어져 복잡해질 수 있다. 그래서 mutations: {}가 아닌 ajax 요청하지 않고 actions: {}에서 한다. 더보기 게시물 ajax를 요청해보자. store.js import axios from 'axios'; import { createStore } from 'vuex' const store = createStore({ state () { return { more : {}, } }, actions : { getData(){ axios.get('URL.json') .then((..

state 변경 state 변경은 store.js만 한다. state 이상이 생기면 store.js를 보자. store.js import { createStore } from 'vuex' const store = createStore({ state () { return { name : 'lee', age : 20 } }, mutations :{ changeName(state){ state.name = 'park' }, changeAge(state, payload){ //state.age++; state.age += data } } }) export default store; 먼저 store.js에 state를 수정하기 위한 방법을 mutations에 함수 정의한다. 전달할 데이터를 App.vue에서 pa..

Vuex 설치 및 셋팅 Vuex를 왜 사용할까? 하위컴포넌트 전송 props, 상위컴포넌트 전송 custom event, 또는 mitt는 데이터 주고받기 어렵다. Vuex는 모든 컴포넌트가 데이터를 공유할 수 있는 js파일로 모든 컴포넌트가 직접 꺼내쓸 수 있다. 컴포넌트, 데이터가 많을 때 Vuex를 쓰고 간단할 때는 props를 쓰자. Vuex 4 설치 npm install vuex@next 또는 yarn add vuex@next Vuex 4 셋팅 모든 컴포넌트가 쓸 수 있는 데이터 저장용 js파일 만들어야한다. src폴더에 store.js를 생성한다 import { createStore } from 'vuex' const store = createStore({ state () { return { n..