Vuex란?

vuex 란?

• vue.js에서의 상태 관리 라이브러리

• vue.js 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소

• 다른 상태 관리 라이브러리 Flux(facebook), Redux(React)에서 영감을 받음
• vue.js에서도 Redux를 사용할 수 있지만, Vuex와의 호환이 좋고 더 직관적으로 개발 가능

state

• mutation을 통해 state가 변경이 일어나면 반응적으로 View가 업데이트

mutations

• Helper 함수로 직접 호출 가능.

actions

• action에서도 mutation을 통해 state 변경을 가능하게 할 수 있다.

getters

• getter의 결과는 종속성에 따라 캐시 되고 변경된 경우에만 다시 계산한다.

modules

vuex 한글 문서

Vuex가 무엇인가요? | Vuex

Vue.js의 중앙 상태 관리

https://v3.vuex.vuejs.org/kr/

vuex 기본 구조

vuex 흐름

1. store 생성

const store = new Vuex.Store({
	state: {
		count: 0,
	},
	getters: {},
	actions: {},
	mutations: {},
})

1. vuex를 vue 컴포넌트에 가져오기

const Counter = {
	template: `<div>{{ count }}</div>`,
	computed: {
		count () {
			return store.state.count
		}
	}
}

1. getters

computed: {
	...mapState({
		cnt: 'count',
	}),
	...mapGetters({
		count: 'count'.,
	}),
}

methods: {
    ...mapMutations({
        a: 'a',
        b: 'b'
    }),
    ...mapActions({
        c: 'c'
    }),
},

Module

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a
store.state.b

네임스페이스, namespaced

const store = new Vuex.Store({
	modules: {
		...
		namespaced: true
	}
})

import {createNamespacedHelpers} from 'vuex';

const {mapState, mapMutations} = createNamespacedHelpers('message');

export default {
    name: 'Message',
    computed: mapState([
        'isShow',
        'message',
        'buttons',
    ]),
    watch: {
        ...
    },
    methods: {
      ...mapMutations([
          'hide',
      ]),
			...
}

vuex의 component에 store를 바인딩하는 방법

import { mapState } from 'vuex';

new Vue({
	computed: mapState({
		count: state => state.count,
		countAlias: 'count'
	})
})

import { mapState } from 'vuex';

new Vue({
	computed: mapState([
		'count'
	])
})

[Vue.JS] Vuex Store를 바인딩하는 4가지 방법!!

Vue.js의 Vuex Store 패턴에서 Vue.js Component에 Store를 바인딩 시키는 여러가지 방법을 알아보자. Vuex의 Store를 Component에 바인딩하는 방법에는 여러가지가 있으며 상황에 따라 그 쓰임이 다르다. 그 중에서 가장 실무에 적합하고 가독성이 좋은 방법이 무엇인지 알아보고 활용해보자.해당 포스트에서는 Vuex의 설명

https://kdydesign.github.io/2019/04/06/vuejs-vuex-helper/

└─ A
   └─ B
      ├─ User
      └─ C
         └─ Book

import {mapState, mapActions} from 'vuex'

new Vue({
    computed: {
        ... mapState({
            bookList: state => state.A.B.C.Book.list
        })
    },
    methods: {
        ...mapActions([
            'A/B/C/Book/setList'
        ])
    }
})

import {createNamespacedHelpers} from 'vuex'

const {mapState} = createNamespacedHelpers('A/B/C/Book')

new Vue({
    computed: {
        ... mapState({
            bookList: state => state.list
        })
    }
})

const { mapGetters: widgetGetters, mapActions: widgetActions } = 
createNamespacedHelpers('api/dashboard/widget');
const { mapGetters: stationGetters, mapActions: stationActions } = 
createNamespacedHelpers('api/station/list');

import {createNamespacedHelpers} from 'vuex'

const
    {mapState: userMapState, mapActions: userMapActions} = createNamespacedHelpers('A/B/User'),
    {mapState: bookMapState, mapActions: bookMapActions} = createNamespacedHelpers('A/B/C/Book')

new Vue({
    computed: {
        ... userMapState({
            userList: state => state.user.userList
        }),
        ... bookMapState([
            'list'
        ])
    },
    methods: {
        ...userMapActions({
            setUserList: 'setUserList'
        }),
        ...bookMapActions([
            'setBookList'
        ])
    }
})

import {createNamespacedHelpers} from 'vuex'

const
    userListHelper = createNamespacedHelpers('A/B/User'),
    bookListHelper = createNamespacedHelpers('A/B/C/Book')

new Vue({
    computed: {
        ... userListHelper.mapState({
            userList: state => state.user.userList
        }),
        ... bookListHelper.mapState([
            'list'
        ])
    },
    methods: {
        ...userListHelper.mapActions({
            setUserList: 'setUserList'
        }),
        ...bookListHelper.mapActions([
            'setBookList'
        ])
    }
})

정리