Vue.js Vuex 상태관리, 공통 데이터 저장소

- Vuex

https://vuex.vuejs.org/

What is Vuex? | Vuex

위 문서를 참고해서 여러 방법을 익혀보자, vue 2버전에서는 이벤트 버스도 사용했다고 하는데 vue 3에서는 지원이

 

중단 되었다고 한다. 찾아보니 대부분 Vuex를 많이 쓴다고한다. react로 따지면 redux 같은거라고 보면된다.

 

그리고 공부해서 사용해보니 사용법이 매우매우 쉬웠다.

 

1)props와 custom이벤트로 주고받기 힘들 때 주로 사용한다.

 

2)Vue파일과 데이터가 아주 많으면 사용한다. 보통 큰 프로젝트에서 사용한다고한다.

 

3)사용방법

 

npm install vuex@next 를 먼저해준다. 그리고 src폴더안에 store.js를 만들고 아래와같이 코드를 작성한다.

import { createStore } from 'vuex'

const store = createStore({
  state(){
    return {
      
    }
  },
})

export default store

그 다음 main.js에 아래와 같이 등록한다.

import store from './store.js'
app.use(store).mount('#app')

데이터를 가져오는 방법은 아래와 같다. {{ $store.state.데이터명 }} 그리고 함수나 mounted에서 사용하려면

 

this.$store.state.자료 와같이 사용하면 된다.

<h1>Vuex사용하기</h1>
<p>computed로가져온:{{ name }},{{ $store.state.name}}, {{ $store.state.number }}, 나이{{ $store.state.age }}</p>
<button @click="$store.state.name='이름변경'">이름 변경</button>
<button @click="$store.commit('addAge')">나이증가</button>
<!-- 하지만 이렇게 직접 컴포넌트 안에서 이름을 바꾸면 안된다. 사용규칙!-->
<!-- 수정하고 싶으면 방법을 Vuex에 정해두고 바꾸는 규칙을 만들어야한다. -->
<!-- 컴포넌트가 너무 많으면, 데이터가 너무 많으면 보관장소로 쓴다. 프로젝트가 클 때 -->

- mutations : Vuex에 있는 state데이터 변경하기 

위에 코드처럼 직접 수정도 가능하지만 원칙상 사용하면 안되는 방법이다. 그래서 바꾸는 규칙을 정해줘서 사용해야 한다.

 

store.js에 mutations라는 항목을 먼저 만든다.

 

import { createStore } from 'vuex'
import axios from 'axios';

const store = createStore({
  state(){
    return {
      name:'kimjiwon',
      number:'010-1111-1111',
      age:20,
    }
  },
  mutations:{
    addAge(state){
        state.age++
    }
  }

그리고 사용할 때는 아래와 같이 사용한다.

App.vue

.......

<button @click="$store.commit('addAge')">나이증가</button>

......

이와같이 사용할 수 있다.

 

- actions : ajax요청같은 비동기 처리할 때 사용

 

mutations사용할때 와 같이 아래 actions를 추가해서 사용해 주면 된다. 여기서도 함수처럼 만들면되고 mutations과

 

즉 동기적 처리는 mutations, 비동기적 처리는 actions로 구분해서 사용한다고 보면 된다.

 

store.js
.......

mutations:{
    addAge(state){
        state.age++
    }
  },actions : {
    receiveData(){
      axios.get('https://jsonplaceholder.typicode.com/posts?_start=0&_end=5').then((data)=>{ 
        console.log(data.result);
        //성공시 실행할 코드 
        // 이후 App.vue에서는 $store.dispatch('actions에서 정한 함수이름') 으로 가져온다. receiveData
        // context.commit('mutations함수명') 
        // 그리고 바로 바로 state에 넣고 싶으면 이와같이 사용한다.
      })
    }
  }

그리고 위에 주석으로도 적어 두었지만 actions로 가져온 데이터로 state를 변경하고 싶으면 axios안에서

 

context.commit('mutations함수명')과같이 사용한다.

 

- mapState, computed

methods와 computed의 차이는?

-> methods안에 만든 함수는 함수를 부를 때 마다 안의 코드가 실행된다.

computed안에 만든 함수는 함수를 불러도 안의 코드가 실행 되지않고, 컴포넌트 로드시 한번 실행되고 그 값을

계속 저장해서 사용한다.

 

1)computed를 사용하면 state에서 가져오는 코드를 짧게 바꿀 수 있다.

computed : {
  name(){
    return this.$store.state.name
  }
}

이와같이 store.js의 state를 App.vue로 가져오면 바로 store.js의 변수들을 바로 축약해 사용 할 수 있다.

 

2)mapState

mapState를 사용하면 computed로 짧게 줄일 수 있다.

 

저렇게 1개씩 가져와도 되지만 여러개를 가져오고 싶을 때는 아래와 같이 사용한다.

import {mapState} from 'vuex'

computed:{
    name(){
      // 자주쓰는 변수는 computed로 저장 이것도 useEffect활용이랑 비슷하다.
      return this.$store.state.name;
    },
    // 그리고 여러개를 쓴다면?
    ...mapState(['name','age']),
    // object를쓰면 이름 바꿔서도 사용가능
    ...mapState({newName:'name'}),
  },
  methods:{
    ...mapMutations(["함수명"],),
    
    .......

...mapState로 store.js의 변수들을 가져올 수 있고 {}형으로 바꾸면 변수의 이름을 바꿔서도 사용 가능하다.

 

추가적으로 methods에 ...mapMutations 를 사용해 mutation함수 역시 편하게 가져와 사용할 수 있다.

 

이거 외에도 mapAction등 여러 방법이 있으니 프로젝트 하나 만들어보면서 추가적으로 학습해 봐야겠다.

 

정말 단순하지만 computed로 가져온 변수와 그냥 $store.state를 사용해 가져온걸 비교해 보았다. 결과는 같다.

 

App.vue

0.00MB

ReceivePage.vue

0.00MB

main.js

0.00MB

store.js

0.00MB