Vuex getters & mutations & actions 사용하기

getters

... getters: { userCount: state => { return state.allUsers.length; } },
JavaScript
아래와 같이 mapgetters를 사용하면, 짧은 변수명으로 사용이 가능하다.
import { mapGetters } from 'vuex' computed: { ...mapGetters(['userCount', '~~', '~~']) }
JavaScript
import { mapGetters } from 'vuex' computed: { ...mapGetters({ count: 'userCount', number: '~~', percent: '~~', }) }
JavaScript
아래와 같이 state도 매핑이 가능하다.
import { mapState } from 'vuex' computed: { ...mapState(['users', '~~', '~~']) }
JavaScript

mutations & actions

스테이트 변화를 감지한다.
mutations: { addUser: (state, payload) => { state.users.push(payload); } }
JavaScript
import { mapMutations } from 'vuex' this.addUser(user);
JavaScript
mapMutations 없이 사용하려면 아래와 같이 커밋을 해야한다.
//this.addUser(user); this.$store.commit('addUser', user);
JavaScript
mutations는 동기로 동작한다. 비동기로 처리하려면 아래와 같이 개발해야한다. actions는 주로 앞단에 위치하는 로직들을 담당한다고 보면 된다.
actions: { adduser: context => { context.commit('addUser') } } actions: { adduser: ({ commit }) => { //context에 있는 객체이다. commit('addUser') } } actions: { adduser: ({ commit }, payload) => { //context에 있는 객체이다. 객체를 사용하려면 중괄호 옆에 주입해야 한다. commit('addUser', payload) //addUser mutation을 수행한다. } }
JavaScript
this.$store.dispatch('addUser', user);
JavaScript
TOP