[Vue] 08)Vuex 활용 예시

Before start

• 객체 메서드 축약형을 사용하기

// before
const obj1 = {
	addValue: function(value){
		return value
	},
}

// after
const obj2 = {
	addValue(value){
		return value
	},
}

src / store / index.js

• vuex의 핵심 컨셉 4가지
  • state
    • 중앙에서 관리하는 모든 상태 정보
    • $store.state로 접근 가능
    • store의 state에 message 데이터 정의
  • getters
  • mutations
  • actions

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		message: 'message in store'
	},
	getters: {
	},
	mutations: {
	},
	actions: {
	},
	modules: {
	}
})

// App.vue

<template>
	<div id="app">
		<h1>{{ $store.state.message }}</h1>
	</div>
</template>

...

export default{
	name: 'App',
	computed: {
		message(){
			return this.$store.state.message
		},
	},
}

• component에서 state 사용
• $store.state로 바로 접근하기보다 computed에 정의 후 접근하는 것을 권장
• Vue 개발자 도구에서 관리하면을 Vuex로 변경하면 관리 되고 있는 state 확인 가능

actions

• state를 변경할 수 있는 mutations 호출
• component에서 dispatch()에 의해 호출됨
• dispatch(A, B)
  • A: 호출하고자하는 actions 함수
  • B: 넘겨주는 데이터(payload)
• actions에 정의된 changeMessage 함수에 데이터 전달하기
• component에서 actions는 dispatch()에 의해 호출됨

// App.vue

<template>
	<div id="app">
		<h1>{{ message }}</h1>
		<input type="text" @keyup.enter="changeMessage" v-model="inputData">
	</div>
</template>

<script>
	export default{
		...
		data() {
			return{
				inputData: null,
			}
		},
		methods: {
			changeMessage(){
				const newMessage = this.inputData
				this.$store.dispatch('changeMessage', newMessage)
				this.inputData = null
			},
		},
	}
</script>

• actions의 첫번째 인자는 context
  • context는 store의 전반적인 속성을 모두 가지고 있으므로 context.state와 context.getters를 통해 mutations을 호출하는 것이 모두 가능
  • dispatch()를 사용해 다른 actions도 호출할 수 있음
  • 단, actions에서 state를 직접 조작하는 것은 삼가야함
• actions의 두번째 인자는 payload
  • 넘겨준 데이터를 받아서 사용

mutations

“actions에서 commit()을 통해 mutations 호출하기”

• mutations는 state를 변경하는 유일한 방법
• component 또는 actions에서 commit()에 의해 호출됨
• commit(A, B)
  • A: 호출하고자하는 mutations 함수
  • B: payload

// store/index.js

export default new Vuex.Store({
	...
	actions: {
		changeMessage(context, message){
			context.commit('CHANGE_MESSAGE', message)
		},
	},
	...
})

“mutations 함수 작성하기”

• mutations는 state를 변경하는 유일한 방법
• mutations 함수의
  • 첫번째인자는 state
  • 두번째인자는 payload

// store/index.js

export defualt new Vuex.Store({
	...
	mutations: {
		CHANGE_MESSAGE(state, message){
		// console.log(state)
		// console.log(message)
		state.message = message
		},
	},
	...
})

---

getters

• getters는 state를 활용한 새로운 변수
• getters 함수의
  • 첫번째 인자는 state
  • 두번째 인자는 getters

// store/index.js

export default new Vuex.Store({
	...
	getters: {
		messageLength(state){
			return state.message.length
		},
		doubleLength(state, getters){
			return getters.messageLength * 2
		},
	},
	...
})

// App.vue

export default{
	...
	computed: {
		message(){
			return this.$store.state.message
		},
		messageLength(){
			return this.$store.getters.messageLength
		},
		doubleLength(){
			return this.$store.getters.doubleLength
		},
	},
	...
}

• getters 역시 state와 마찬가지로 computed에 정의해서 사용하는 것을 권장

// App.vue

<template>
	<div id="app">
		<h1>길이 {{ messageLength }}의 메시지 {{ message }}를 입력받음</h1>
		<h3>x2 : {{ doubleLength }}<h3>
		<input type="text" @keyup.enter="changeMessage" v-model="inputData">
	</div>
</template>