mitt가 귀찮아서 쓰는 Vuex

간단한 프로젝트에서도 데이터를 주고받기가 어려워서  Vuex를 사용한다.

Vuex를 사용하면, js파일에 데이터를 다 몰아넣고, 모든 컴포넌트가 데이터를 직접 꺼내쓴다.

설치해보면,

npm install vuex@next --save

설치하고, 데이터저장 공간을 만들어주고 다음과 같이 입력해준다. 여기선 store.js로 만들었다.

//store.js
import { createStore } from 'vuex'

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

export default store

그리고 main.js에서 등록을 해주면 된다.

//main.js
import store from './store';

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

위처럼 입력하면 모든 컴포는트들이 공유를 하게 된다.

데이터는 위의 return안에 저장하면 되며, 꺼내서 사용할 땐,

{{ $store.state.데이터이름 }}

이런 식으로, 데이터바인딩해주면 된다.

그리고 , $store.state.데이터이름 = 값 이렇게 데이터수정도 가능은 하지만, Vuex에서 컴포넌트 안에서 직접 수정하기는 국룰마냥 금지되어 있다.

그래서 수정하려면 직접 수정하는게 아니라, store.js에 바꾸라고 부탁하는 방법으로 해야한다.

state(){
    return {
        name: 'kim',
        age : 20,
    }
  },
  mutations: {
    이름변경(state) {
        state.name = 'park'
    }
}

먼저, 위처럼 name이란 데이터를 바꾸려면 store.js에 mutations를 만들고, 수정방법을 정의해줘야 한다. 함수형식으로 쓰며, 파라미터에 state가 들어가서 오브젝트처럼 사용하면 된다.

그리고 버튼을 누르면 변경하게끔 하려면

<button @click="$store.commit('이름변경')">버튼</button>

이런 식으로, $store.commit(함수명) 으로 수정을 부탁하면 된다.

그리고 수정을 부탁할 때, $store.commit('함수명',데이터) 이렇게 보내면

이름변경(state, payload) {
        state.name = 'park'
}

이렇게 두번째 파라미터인 payload에 담기게 된다.

 

이번엔 actions : {}라는 항목을 알아보자.

여긴 ajax를 하거나 오래걸리는 작업을 하는 곳이다.

 

그냥 mutations에 해도 되지 않을까 라는 의문이 생길 수 있는데, 순차적으로 state를 변경하고 싶을 때가 있는데, 그럴 때, 하나가 오래걸리면 전체적인 속도가 느려지기 때문이다.

사용해보면

actions: {
    getData(context) {
      axios.get(
        `https://codingapple1.github.io/vue/more0.json`
        ).then((a)=>{
          context.commit('setMore',a.data)
      })
    }
  }

이런 식으로, actions안에 함수로 getData라는 함수를 만들어서 axios를 사용해주고,

<button @click="$store.dispatch('getData')">더보기버튼</button>

이렇게, 버튼을 누르거나 하면 $store.dispatch을 이용해서 함수를 안에 넣어준다.

그리고 위처럼 context라는 파라미터를 받아서 commit해주면 데이터에 연결할 수 있다. context파라미턴 대충 $store라고 생각하면 편하다. 그리곤, 아래처럼

state(){
    return {
        more: {

        },
    }
  },
  mutations: {
        setMore(state, data) {
          state.more = data
        }
        
  },

more이란 저장공간을 만들고, setMore이란 함수를 만들어서 state.more에 data라는 파라미터를 써서 받은 데이터를 넣어줄 수 있다.

 

이번엔 computed라는 함수공간을 배워보자. 

Vue에서는 함수만드는 공간이 2개가 있다. methods와 computed가 있는데,

차이점은

computed : {
  now2(){
    return new Date()
  }
}, 
methods : {
  now(){
    return new Date()
  }
}

이렇게 같은 함수를 만들었을 때, methods함수는 사용할 때마다 실행되지만, computed함수는 사용해도 실행되지 않는다. 즉, 페이지가 로드되면 한번 슥 읽고 간직했다가 필요할 때 사용하는 원리이다.

그래서 계산결과 저장용 함수로 사용된다. 그리고 computed함수는 사용할 때, {{ now2 }}라고 사용한다. 소괄호를 붙이지 않고, 함수 이름만 사용한다. 그리고 내부에 항상 return이 있어야 한다.

 

이제 mapState라는 state에서 코드를 꺼내쓸 때, 짧게 사용할 수 있는 방법을 써보자.

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

computed함수에 이렇게 적어주면, 코드에서 맨날 $store.state.name이렇게 쓰던걸 {{ name }} 이렇게만 사용하면 된다.

근데 위처럼 적는것도 길때, ...mapState()를 사용하는데,

import {mapState} from 'vuex'

computed : {
  ...mapState(['state이름1', 'state이름2'])
}

이렇게 적고, state이름1 위치에 name, age, likes이런 state를 다 적어주면 된다.

만약, name이란 state를 가져다 쓰는데, 다른이름을 짓고싶으면

computed : {
  ...mapState(['state이름1', 'state이름2']),
  ...mapState([작명 : 'name', ])
}

이런 식으로, 사용한다.

 

mapMutations와 mapActions같은 코드줄이는게 있으니 더러울 때 이용하면 좋을 것 같다.