vuex store state, mutation 사용법

vuex는 vue의 여러 컴포넌트 간 데이터 전달과 이벤트 통신을 한 곳에서 처리할 수 있도록 해주는 라이브러리입니다.

일반적으로 중대형 규모의 웹 애플리케이션의 경우 뷰의 컴포넌트 통신 방식인 props, eventemit이 많아져 중간에 거쳐야 할 컴포넌트가 많아지는 문제가 생깁니다.

이런 문제를 해결하기 위해 모든 데이터를 중앙 집중적으로 관리하는 것입니다.

vuex는 크게 4가지 구성요소로 이루어져 있습니다.

state : 컴포넌트 간에 공유할 데이터가 있는 곳입니다. 프로젝트 내에서는 어디서든 참조할 수 있습니다.

mutation : state를 변경시키는 역할을 합니다. 동기 처리를 합니다.

view : 데이터가 표현될 템플릿

actions : 사용자로부터 입력을 받아 처리하는 methods 

간단한 예제를 통해 알아보도록 하겠습니다.

 

store 코드입니다.

store안에 state에 data_1이라는 데이터가 있습니다.

이 데이터는 위에서 말한 것처럼 프로젝트의 어디에서건 참조할 수 있습니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    data_1:"hi hello"
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

app.vue 코드입니다.

{{$store.state.data_1}} 이렇게 store의 데이터에 접근할 수 있습니다.

<template>
  <div id="app">
    <div id="nav">
      <Navbar/>
      {{$store.state.data_1}}
    </div>
    <b-container>
      <router-view/>
    </b-container>
  </div>
</template>

<script>  
import Navbar from "./components/Navbar"
export default {
  components :{
    Navbar
  }
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

 

확인해보도록 하죠.

 

hi hello, data_1 값이 제대로 나온 것을 알 수 있습니다.

navbar안에 balmostory도 hi hello로 바꿔보도록 하겠습니다.

 

위와 같이 {{$store.state.data_1}}을 통해 데이터에 접근하고 데이터가 제대로 나온 것을 알 수 있습니다.

<template>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand to="/">{{$store.state.data_1}}</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav class="ml-auto">
        <b-nav-item to="/login">Login</b-nav-item>
        <b-nav-item to="/signup">Signup</b-nav-item>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</template>

<script>
export default {
name : 'Navbar'
}
</script>

<style>

</style>

 

mutation을 사용하는 부분까지 해보도록 하겠습니다.

hi hello를 balmostory로 바꾸는 mutation을 만들어보도록 하죠.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    data_1:"hi hello"
  },
  mutations: {
    changedata_1(state){
      return (state.data_1 ="balmostory")
    }
  },
  actions: {
  },
  modules: {
  }
})

mutation에 changedata_1(state).... 함수를 만들어줍니다.

 

<template>
  <div id="app">
    <div id="nav">
      <Navbar/>
      {{$store.state.data_1}}
        <button @click="change">change</button>
    </div>
    <b-container>
      <router-view/>
    </b-container>
  </div>
</template>

<script>  
import Navbar from "./components/Navbar"
export default {
  components :{
    Navbar
  },
  methods: {
    change(){
      this.$store.commit("changedata_1");
    }
  }
}
</script>

methods에 함수를 만들고 그 함수 안에 mutation의 함수를 등록해줍니다.

그리고 버튼을 만들고 클릭을 하면 실행되게 했습니다.

change를 누르면 두 가지 모두 balmostory로 바뀌는 것을 확인할 수 있습니다.

다음 시간에는 다른 요소들에 대해 공부해보도록 하겠습니다.