#18. Vue_vuex

vuex 사용법

vuex는 props와 custom event로 데이터 주고받는게 힘들때 사용합니다. vuex를 설치하면 js 파일하나에다 모든 데이터를 저장 할 수있습니다. 그럼 모든 컴포넌트를 그 데이터를 직접 꺼내고 수정할 수 있어 프롭스 필요없이 모든 컴포넌트가 데이터에 직접 접근이 가능합니다. 그리고 vue파일과 데이터, 규모가 클 때 사용합니다. 리엑트에서 리덕스 개념으로 생각하면 편합니다.

vuex 셋팅

우선 터미널에서 vuex를 설치합니다.

npm i vuex@next --save

그리고 js파일을 만들어 아래와 같이 기본 셋팅을 합니다.

// store.js
import (createStore) from 'vuex`

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

        }
    },
})

export default store

그다음 store.js 파일을 main.js에 등록하면 됩니다. (꼭 등록해야합니다.)

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

그럼 store.js에 저장한 데이터들을 모든 컴포넌트가 가져다 쓸 수 있습니다. 데이터 저장은 store.js에 저장하면 되고 출력하려면 vue파일에서 {{$store.state.데이터명}}해서 사용하면 됩니다.

---

vuex mutations

mutatuons는 데이터 수정방법을 정의합니다. 오브젝트 항목을 만든 다음에 거기다 state 수정 방법을 함수로 만들어 정의합니다. 예를 들어 vue파일에 어떤 버튼을 누루면 age라는 state를 1더해주는 기능을 만들고 싶을때 아래 예시와 같습니다.

// store.js
import (createStore) from 'vuex`

const store = createStore({
    state(){
        return {
            name : 'Lee',
            age : 20,
        }
    },
    mutations :{
        plusAge(state){
            state.age++
        }
    },
})

plusAge()함수에 파라미터 state는 위에 있는 age상태 입니다. 그다음에 vue파일에서 버튼 누를때 age + 1을 해주고 싶을때 위에 함수를 통해 vue파일에서 부탁할 수있습니다.

<!-- app.vue -->
<button @click="$store.commit('plusAge')">버튼</button>

vue파일은 $store.commit(함수명) 이런 형식에 맞춰 부탁 할 수 있습니다. 이게 vuex에 있는 state수정 방법입니다.

---

vuex action

vuex에서 상태를 수정할때 mutations함수를 활용해 수정합니다. 하지만 서버에서 데이터를 가져와서 데이터를 수정하고 싶을때가 있습니다. 이때 mutation이 아닌 actions라는 항목에 작성해서 사용하면 됩니다.

actions step 1

우선 데이터를 보관함을 만들어 줍니다.

// store.js
import (createStore) from 'vuex`

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

actions step 2

state를 수정하는 함수는 mutations에다 작성하고 ajax요청은 넣지 않습니다. actions에서 다해주기 때문입니다.

// store.js
import (createStore) from 'vuex`

const store = createStore({
    state(){
        return {
            name : 'Lee',
            age : 20,
        }
    },
      mutations:{
        setMore(state , data){
            state.more = data
        },
})

actions step3

mutations함수를 사용할 땐 예외없이 commit()라고 써야합니다. 그리고 그걸 쓰기 위해선 함수에 context라는 파라미터를 추가해주면 됩니다. context 대신 작명 가능하며 $store 변수 같은거라고 생각하면 됩니다.

// store.js
const store = createStore({
    state(){
        return {
            more : {},
        }
    },
    mutations:{
        setMore(state , data){
            state.more = data
        },
    },
    actions : {
        getData(context){
            axios.get(`요청코드`)
            .then((a)=>{
                //성공시 실행할 코드
                console.log(a.data) 
                context.commit('setMore', a.data)
            })
        },
    },
})

actions step 4

actions 항목을 다만들었으면 $store.dispatch('action함수이름') 를 사용해서 데이터를 가져옵니다.

<!-- app.vue -->
<p>{{$store.state.more}}</p>
<button @click="$store.dispatch('getData')">더보기버튼</button>

---

vuex mapstate

state를 vue파일에서 꺼내 쓸 때 $store.state.변경할거 이런식으로 꺼내 썼는데 이게 너무 길고 줄이고 싶으면 mapState라는 함수를 사용할 수 있습니다. 그전에 computed라는 항목을 알고 넘어가야 합니다.

computed

함수를 만들때 methods:{}안에 만들수 있는데 실은 computed:{}안에도 만들수 있습니다. 다만 차이점은 methods는 함수를 부를때마다 안의 코드가 실행되고 computed는 함수를 불러도 실행이 안됩니다. 즉 일종의 계산결과 저장공간이라고 생각하면 됩니다. 트위터 기입 날짜, 인스타 그램 기입 날을 입력할 떄 좋습니다.

mapState 사용법

사용할때 무조건 import를 해서 사용할수 있습니다. 그리고 꺼내야할 상태가 100개가 있다고 가정했을 때 mapState를 쓰면 알아서 computed에다가 state를 등록해 줍니다.

//사용법 1
import {mapState} from 'vuex'

computed : {
    ...mapState(['state1','state2'])
}

그리고 객체 자료형을 넣으면 이름 변경도 가능합니다.

//사용법 2
import {mapState} from 'vuex'

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

또 한 mutations 함수도 쉽게 가져다 쓸 수 있습니다. 그래서 $store.commit('함수1') 가아닌 함수1()로 쓸수있어서 코드를 줄일수 있는 장점이 있습니다!

//사용법 3
import {mapState} from 'vuex'

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