Vue.js 객체 속성 및 문법, vuex 사용 형태 정리
24667 단어 vue.jsvuexJavaScriptJavaScript
Vue 객체 속성
<template>
<div>
<h1 @click.prevent="function1">template태그안은 html 코드 부분</h1>
<p>{{msg}}</p>
<!-- 자식 컴포넌트 사용 -->
<child-component @onFunction1="function1" />
</div>
</template>
<script>
// 모듈 및 컴포넌트 import
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
import ChildComponent from './path';
// Vue 객체 export
export default {
name: 'Parent', // *name: 이름
components: { // *components: 사용할 컴포넌트 등록
ChildComponent,
},
props:{
// *props: 부모에서 내려주는 데이터 - 자식이 바꿀 수 없음
},
data() { // *data - 컴포넌트에서 사용하는 데이터 - 로컬 데이터 (지역 변수)
// 충돌 방지 위해 return 형식으로 작성 해야 함
return {
msg: '<script>태그 안은 자바스크립트 영역 (이벤트 / 로직 처리)'
};
},
// 라이프 사이클
created() {
// *created: vue인스턴스 생성 후 데이터에 관한 설정이 완료되고 나서 호출, 주로 데이터 init
window.addEventListener('scroll', this.$_function2);
},
mounted() {
// *mounted: vue인스턴스가 마운트 된후 호출
this.$nextTick(() => {
// $nextTick - 마운트 된후 dom이 그려지고 나서 호출
});
},
updated() {
// *updated: 데이터가 변경되면 호출 됨 - 잘 사용하지 않음
},
beforeDestroy() {
// *beforeDestroy: Vue 인스턴스가 제거되기전에 호출
window.removeEventListener('scroll', this.$_handleScroll);
},
destroyed() {
// *destroyed : Vue 인스턴스가 제거 되고 난 후
},
// 변화 속성 감지 및 캐싱
watch: { // *watch: 주로 비동기 실행 데이터 변화 감지용
someData: function(newVal, oldVal) {
console.log('data changed', oldVal, '----->', newVal);
},
},
computed: { //*computed: 로직을 적용한 캐싱된 속성
...mapGetters(['rootStoreData']), // getter - 스토어 계산 데이터
...mapState('module1', [ // state - 스토어 데이터
'inModuleData',
]),
reversMsg() { // 지역 계산 데이터
return this.msg.split('').reverse().join('');
}
},
// 사용되는 함수
methods: { // *methods: 함수 정의
// mutations - 스토어 데이터 변이 -> 스토어 변수 상태변화
...mapMutations('module1', ['setData']), // 네임스페이스 사용가능
// actions - 스토어 메소드
...mapActions(['fetch']),
function1() {
console.log('자식이 this.emit으로 event trigger시킴');
// ex) this.$emit('onFunction1'); ---- in ChildComponent
},
$_function2() {
console.log('난 $가붙은 private한 함수에요 h1태그를 클릭하셨네요');
}
}
}
</script>
<style>
/* css 관련 영역 */
</style>
상태관리 라이브러리로 Vuex 사용하는 Store(모듈) 문법
import myApi from '../api/myApi'; // 사용할 API 등 import
import { Types as RootTypes } from '../rootStore'; // rootStore (메인 스토어)
// Type constants - 상수로 getters, actions, mutations 타입 관리
export const Types = {
getters: {
GET_IS_ERROR: 'getIsError',
},
actions: {
FETCH: 'fetch',
},
mutations: {
SET_DATA: 'setData',
},
};
// *state: 데이터
const state = () => ({ // initial Data
data: null, // 전역 데이터
});
// *getters: store 데이터의 계산 속성 적용 (로직 적용)
const getters = {
// 파라미터로 state, getters, rootState, rootGetters사용가능 not 객체형태
[Types.getters.GET_IS_ERROR](state, getters, rootState, rootGetters) {
return state.data.status.code !== 200;
},
};
// *actions: 비즈니스 로직 실행 / 비동기적 호출 등의 로직 case
const actions = {
// 파라미터 객체로 {dispatch, state, commit, rootState, getters, rootGetters} 사용가능
async [Types.actions.FETCH]({ commit }) {
//api 호출
return new Promise((resolve, reject) => { // **dispatch: action 호출
myApi.getData().then(resp => {
const newData = resp.data.result;
// **commit: mutation 호출 - 새로 받아온 데이터로 바꿔줌
commit(Types.mutations.SET_DATA, newData);
// options 에 root:true 를 포함하면 네임스페이스 모듈 의 root 변이에 commit 을 허용
commit(RootTypes.mutations.SET_STATUS, 'COMPLETE', { root: true });
resolve(newData);
}).catch(err => {
reject(err);
});
});
},
};
// *mutations: 데이터 상태 변이 시킴
const mutations = {
// 데이터 set - 첫번째 파라미터는 state, 두번째파라미터는 넘겨받는 param 데이터
[Types.mutations.SET_DATA](state, newData) {
state.data = [...newData];
},
};
export default { // export 하여 사용가능하게 함
namespaced: true,
state,
getters,
actions,
mutations
};
/* 메인 스토어의 경우 모듈도 export
export default new Vuex.Store({
modules: {
module1,
module2,
...
},
state,
getters,
actions,
mutations
});
*/
<참고> Vuex 이점 및 아키텍쳐
Author And Source
이 문제에 관하여(Vue.js 객체 속성 및 문법, vuex 사용 형태 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tjdud0123/Vue.js-객체-속성-및-문법-vuex-사용-형태-정리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)