- 모듈을 사용해, 저장소를 구성하면 설장한 속성 이름이 모두 달라야함.
- Vuex 가 지역저장소 모든 속성을 Vuex의 전역으로 등록하기 때문.
- 이를 위해, 이름을 접두사 / 접미사를 포함해 상수로 정의하는 것을 권장
namespace 같이 옵션을 주는 방식도 있는데, 일단 패스.
export const types = {
getters: {
GET_STATE_C_NUM: 'GET_STATE_C_NUM'
}
}
import {types} from './types/modueCTypes' // types 선언
const GET_C_NUM = 'c/GET_C_NUM'
const INCREMENT_C_NUM = 'c/C_INCREMENT'
const moduleC = {
state: {
todos: [{cNum: 10000}]
},
mutations: {
[INCREMENT_C_NUM]: function (state) {
state.todos[0].cNum += 100
}
},
getters: {
[GET_C_NUM]: function (state) {
// getters['c/GET_C_NUM']
return state.todos[0].cNum
},
[types.getters.GET_STATE_C_NUM]: (state) => {
return state.todos[0].cNum
}
}
}
export default moduleC
나는 위와 같은 방식으로 이용하였다. 사용할 때는
import { mapGetters, mapMutations, mapActions, mapState } from 'vuex'
Vuex 에 내장된 helper 함수를 사용했다.
mapGetters({
parentCounter : 'getCounter' // getCounter 는 Vuex 의 getters 에 선언된 속성 이름
})
mapGetters([
'getCounter'
])
위의 헬퍼 함수를 사용할 때, ES6의 ... (전개) 연산자를 사용한다.
computed 속성 - {}
mapGetters
mapState
methods 속성 - {}
mapMutations
mapActions
------
<template>
<div>
<p><router-link to="/">Go to First Page</router-link></p>
<p>moduleA : </p>
<p>moduleB : </p>
<p>moduleC : </p>
<p>moduleC(types 로 속성값을 관리하는 방식) : </p>
<button @click="incrementNumA">+ 증가(a 모듈)</button>
<button @click="incrementNumB">+ 증가(b 모듈)</button>
<button @click="incrementNumC">+ 증가(C 모듈)</button>
<hr>
<ul>
<li v-for="(item, index) in todos" v-if="item.done" :key="item.text" @click="toggleTest(index)"></li>
</ul>
</div>
</template>
<script>
import { mapGetters, mapMutations, mapActions, mapState } from 'vuex'
import {types} from '../../store_modules/types/modueCTypes'
export default {
name: 'vuexModule',
computed: {
...mapGetters(['todos/DONE_COUNT']),
...mapState({
todos: (state) => state.todo.todos
}),
...mapGetters({getNum: 'getNum', getNum2: 'getNum2', getCNum: 'c/GET_C_NUM', test: types.getters.GET_STATE_C_NUM})
},
methods: {
...mapMutations({incrementC: 'c/C_INCREMENT'}),
...mapActions({fetchTest: 'todos/FETCH_ALL'}),
incrementNumA () {
console.log(this.$store)
this.$store.commit('increment')
},
incrementNumB () {
this.$store.commit('increment2')
},
incrementNumC () {
this.incrementC()
},
toggleTest (index) {
console.log(index)
this.fetchTest({index: index, done: false})
}
}
}
</script>
<style scoped>
</style>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
import {moduleA} from './store_modules/moduleA'
import {moduleB} from './store_modules/moduleB'
import moduleC from './store_modules/moduleC'
import todosModule from './store_modules/todosModule'
Vue.use(Vuex)
export default new Vuex.Store({
// modules 추가
modules: {
a: moduleA,
b: moduleB,
c: moduleC,
todo: todosModule
},
// countNum 을 state 속성 추가
state: {
countNum: 0
},
getters: {
getCountNumFromStore: (state) => {
return state.countNum
}
},
mutations: {
addCountNum: function (state) {
state.countNum++
},
addCountNum2: function (state, payload) {
state.countNum += payload.num
},
subtractionCountNum: function (state) {
state.countNum--
}
},
actions: {
addCount: function (context) {
// commit 의 대상인 addCountNum 는 mutations 의 메서드를 의미한다.
return context.commit('addCountNum')
},
decreaseCount: function (context) {
// Promise 객체를 명시적으로 반환하는 액션 메서드
return new Promise((resolve, reject) => {
resolve()
setTimeout(function () {
context.commit('subtractionCountNum')
}, 1000)
})
}
}
})
Comments