천소희

기록하는 개발자

업데이트:

카테고리:

/

태그: ,

작성완료시 Todo_list 로 이동

router.push를 이용해서 list로 이동하면 되지만 성공완료 메세지가 보이지 않는다.

페이지 이동을 하면서 컴포넌트가 유실되기 때문!

⇒ 최상위 컴포넌트인 App 에 성공완료 메세지를 넣어두면 어디에서든지 잘 보이게된다.

변경된 status 값이 넘어가지 않기에 변경이 되지않는다

emit으로 값을 넘겨줄 수 있으나 점점 컴포넌트가 깊어지기 때문에 복잡해진다.

Vuex

  • 상태 관리 라이브러리
  • 글로벌하게 관리되는 데이터는 store에서 관리한다.
    1. 설치 : npm install vuex@next --save
    2. src>store>index.js 생성
    3. 해당 코드 작성
// store>index.js
import { createStore } from "vuex";

export default createStore({
    state: {

    }
})

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

createApp.use(store) 추가

state

데이터의 관리 (아래 형식과 같이 작성)

state: {
        showToast: false,
        toastMessage: '',
        toastAlertType: '',
        toastTimeOut: null
}

컴포넌트 사용법

import { useStore } from 'vuex'

export default {
	setup() {
		const store = useStore()
		const example = store.state.exampe
	}

}

옆과 같이 store.state.변수이름으로 작성한 데이터에 접근할 수 있다.

⇒ store에서 변화가 있을때 해당 컴포넌트에서 변화를 감지하지 못하기때문에 computed 로 감싸준다.

computed로 싸인 객체의 값
Untitled

mutations

state 값에 접근하여 변경할 수 있다!

mutations: {
        UPDATE_TOAST_MESSAGE(state, payload) {
            state.toastMessage = payload
        },
        UPDATE_TOAST_ALERT_TYPE(state, payload) {
            state.toastAlertType = payload
        },
        UPDATE_TOAST_STATUS(state, payload) {
            state.showToast = payload
        },
        UPDATE_TOAST_TIME_OUT(state, payload) {
            state.toastTimeOut = payload
        }
    }

mutation의 함수는 모두 대문자로 작성해야 하며, state와 변경할 값을 인자로 받는다!

vue에서는 store.commit(’함수이름’) 으로 사용!

이때 mutation 은 동기적으로 작동되야한다 (완료가 되는 순)

객체나 배열로 추가 및 삭제를 할 떄에는 아래의 코드를 활용한다.

state.toasts.push(payload)
state.toasts.shift() // 첫번째 값 삭제, 특정 행을 삭제하려면 splice 활용

actions

actions: {
        tiggerToast({commit}, message, type = 'success'){
            commit('UPDATE_TOAST_MESSAGE', message)
            commit('UPDATE_TOAST_ALERT_TYPE', type)
            commit('UPDATE_TOAST_STATUS', true)
            const toastTimeOut = setTimeout(() => {
              commit('UPDATE_TOAST_MESSAGE', '')
              commit('UPDATE_TOAST_STATUS', false)
              commit('UPDATE_TOAST_ALERT_TYPE', '')
            }, 3000)

            commit(`UPDATE_TOAST_TIME_OUT`, toastTimeOut)
        }
    }

액션에서는 해당 mutation 함수를 받아서 실질적으로 일어나는 행동을 작성하면 된다.

함수({사용할 컨텍스트}, payload(하나)) 받는 데이터는 하나를 받게 되기때문에 여러개를 받을시 객체 형태로 작성해야한다.

이때 값 변경은 state를 직접 호출하는 것이 아닌 mutation의 함수로 값을 변경해야된다!

다른 파일에서는 store.dispatch('함수이름', 넘겨줄 데이터) 로 사용한다.

getters

vuex에서 사용하는 computed 느낌!

getters: {
        toastMessageWithSmile (state) {
            return state.toastMessage + '^^'
        }
    }

위와 같이 함수로 작성 return 이 반드시 필요!

store.getters.함수이름 으로 사용!

vuex modules

데이터가 많아짐에 따라 점점 커지고 관리하기가 힘들어짐

state를 관련된 것끼리 관리가 가능하다!

modules: {
	toast: {
		namespaced: true,
		state: {},
		mutations: {},
		...
	}
}

모듈안에 객체이름을 넣고 namespaced: true 로 설정한뒤 해당 객체의 데이터와 함수들을 다 넣어주면 된다.

vue 에서 사용할 때는 앞에 객체이름을 작성해주면 된다.

store.state.toast.변수이름

store.getters['toast/toastMessageWithSmile']

store.dispatch(’toast/tiggerToast’)

파일로 분리
store>modules>객체이름 으로 나누고 아래에 파일은 index.js로 생성

toast 폴더

export default {
		namespaced: true,
		state: {},
		mutations: {},
		...
	}

modules

import toast from './toast'

export default {
  toast
}

불러올 객체 폴더를 넣어준다. 이때 toast: toast 로 작성해야되지만 javascript 문법상 앞뒤가 똑같으면 생략이 가능하다!

transition-group

toast.js에서 모든 함수를 관리하게 되면 vue에서는 함수를 사용할 필요가 없어 코드가 깔끔해진다.

여러개의 태그에 액션을 취해야 할때 transition은 하나의 요소밖에 접근을 하지 못해서 에러가 발생

transition-group 태그를 감싸면 해결된다.

참고