[Vue3] Vuex4 사용하기

vue를 사용하는데

데이터가 너무 많거나, 컴포넌트간에 데이터를 주고받는 것이 props 만으로 해결되지 않을 때 사용하는 라이브러리 이다.

store.js 파일 하나에 데이터를 다 때려넣은 뒤에 하나씩 꺼내먹기.. 꺼내쓰기 때문에 간편하기도 하다.

 

아니 이럴거면 나는 mitt를 왜 배운거야....

 

그러나 그것은 그렇지 않다는 것이 코딩애플 스앵님의 말씀.

프로젝트 규모가 크지 않은 이상 vuex를 사용하는 것은 배보다 배꼽이 더 클 수도 있다고 한다. 

기술적인 효율성을 중시하도록 하자. 배움의 효율성을 중시하는 것 보다...(이제 학생의 입장에서 벗어날 때도 되었다.)

 

1. 설치하기

npm install vuex@next
혹은
yarn add vuex@next

 

2. 셋팅하기

  2-1. src 폴더 안에 store.js 파일을 생성하고 그 파일을 export 하기

//store.js 내에 작성

import { createStore } from 'vuex';  //vuex로 부터 create store를 불러왔다

const store = createStore({
  state(){
    return {
      여기에 데이터 와방많이 넣기
    }
  },
})

export default store; //얘를 store 로 내보내겠다.

 

2-2. main.js에 store.js 파일 쓴다고 등록해주기

import store from './assets/store.js';   //store.js 경로 확인 잘 하기

app.use(store).mount('#app');

 

3. store 에 저장했던 데이터 불러오기

//store.js 파일 안에서 데이터를 저장하기


import { createStore } from 'vuex';

const store = createStore({
  state(){
    return {
    
      today: '불타는 금요일',
      
    }
  },
})

export default store;

today 라는 key에 '불타는 금요일' 이라는 문자열 값을 넣어줬다. 

이 데이터를 다른 컴포넌트에서 불러다가 출력할 것이다.

 

이렇게 말이다.

 

//데이터 불러오기

{{ $store.state.키값 }}

 

이제 테스트를 해보겠다.

아주 잘 출력 되었다!!!!

 

끗!