[Vue] Vuex(1) - 설치 및 셋팅 (store.js, $store.state.데이터명)

 Vuex 설치 및 셋팅

Vuex를 왜 사용할까?

 

하위컴포넌트 전송 props, 상위컴포넌트 전송 custom event, 또는 mitt는 데이터 주고받기 어렵다.

Vuex는 모든 컴포넌트가 데이터를 공유할 수 있는 js파일로 모든 컴포넌트가 직접 꺼내쓸 수 있다.

컴포넌트, 데이터가 많을 때 Vuex를 쓰고 간단할 때는 props를 쓰자.

 

Vuex 4 설치

npm install vuex@next
또는
yarn add vuex@next

 

Vuex 4 셋팅

 

모든 컴포넌트가 쓸 수 있는 데이터 저장용 js파일 만들어야한다.

src폴더에 store.js를 생성한다

import { createStore } from 'vuex'

const store = createStore({
    state () {
        return {
            name : 'lee' // state 보관
        }
    },
})

export default store;

 

main.js에 store를 등록해준다. 그럼 전역에서 데이터를 공유한다.

import { createApp } from 'vue'
import App from './App.vue'
import store from './store.js'
let app = createApp(App)
app.use(store).mount('#app')

 

Vuex 4 데이터 꺼내오기

 

store.js에 있는 state 꺼내쓰는 방법은 간단하다. $store.state.데이터명을 사용하면 된다.

<p>안녕 나는 {{ $store.state.name }}야.</p>

=> 안녕 나는 lee야.

 

만약 state를 수정하고 싶으면 미리 store.js에 수정방법을 정의해두고그 방법을 컴포넌트에서 소호나해서 수정해야한다.

그리고 함수나 mounted와 같은 곳에서 쓰려면 this.$store.state.데이터명을 쓰면된다.