[VUE] VUEX

VUEX 설치하기

npm install vuex --save

src > store > index.js 생성하기

import { createStore } from 'vuex';

export default createStore({
  state:{
    ex: 'exmaple'
  },
  getters: {
  	isExample(state){
            return state.ex === 'example' ? true : false;
        },
  },
  mutations: {
  	setExample(state, value) {
            state.ex = value;
        }
  },
  actions: {
  	setExample: ({commit}, value) => {
            commit('setExample', value);
        },
  }
})

src > main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App).use(store).mount('#app')

서버 시작하기

npm run serve

state

store에 저장하여 공통으로 사용할 변수
프로젝트의 모든 곳에서 참조 및 사용 가능

<template>
	<h1>{{ $store.state.ex }}</h1>   // example
</template>

...

getters

계산된 속성의 공통 사용 정의

<template :v-if="$store.getters.isExample">   // isExample: boolean
	<h1>{{ $store.state.ex }}</h1>   // example
</template>

...

mutations

state의 변수를 변경시키는 역할
동기처리 (DB와 같이 데이터 무결성을 유지)
commit('함수명', '전달인자')로 실행
함수형태로 작성

actions

Mutations를 실행시키는 역할
비동기처리
함수형태로 작성