Vuex 4. 설치와 state, getters

NPM

• ES6 기반 지원을 많이 하기 때문에 ES6 기반 코딩이 권장된다.
• package.json 에 해당 의존정보가 기술된다.
• 관행적으로 루트폴더 아래 store 라는 폴더에 들어가며 store.js 파일로 정의된다.

npm i vuex --save

"dependencies": {
    "vue": "^2.5.11",
    "vuex": "^3.6.0"
  },

---

시작

store.js 의 기본적인 생성

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

//use() 는 전역적으로 기능을 추가할 때 사용한다. &store 로 접근 가능하다.
Vue.use(Vuex);

export const store = new Vuex.Store({
  
});

main.js 에 등록하여 Root Instance 에 등록시킨다. 속성은 store 이다.

import Vue from 'vue'
import App from './App.vue'
import {store} from "./store/store";

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

---

기술요소

• state : 공유데이터 data(){}
• getters : 연산 된 state 에 접근하는 속성 computed
• mutations : state 값을 변경하는 이벤트 로직 methods
• actions : 비동시 처리 로직 메서드 aysnc methods

---

State : 공유되는 데이터 $.store 에서 state 속성으로 접근한다.

//Vue
data : {
	message : 'Hello Vue.js!'
}

//Vuex
state: {
	message : 'Hello Vue.js'
}


// 사용

<!-- Vue -->
<p>{{ message }}</p>

<!-- Vuex -->
<p>{{ this.$store.state.message }}</p>

 

Getters : State 에 접근하는 속성 + computed() 와 같이 자동 연산 값을 제공하는 속성

// store.js
state : {
	num: 10
},
getters : { // 메서드 단에서 연산된 값을 제공한다.
	getNumber(state){
    	return state.num;
    },
    doubleNumber(state){
    	return state.num * 2;
    }
}

///

<!-- 사용 -->
<p>{{ this.$store.getters.getNumber }}<p>
<p>{{ this.$store.getters.doubleNumber }}</p>

 

---

TodoApp 에 적용하는 과정

• storage 에 데이터를 끌어오는 로직을 기술했다.
• Vuex 의 Store 생성자 옵션 중 state 를 재정의 하여 전역데이터를 등록시킨다.

//store.js

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

//use() 는 전역적으로 기능을 추가할 때 사용한다. &store 로 접근 가능하다.
Vue.use(Vuex);

// Function 으로 따로 뺌
const storage = {
  fetch() {
    const arr = [];
    //ES6
    const map = Object.entries(localStorage);
    map.forEach((entry,index) => {
      if(entry[0] !== 'loglevel:webpack-dev-server'){
        const item = JSON.parse(entry[1]);
        arr.push(item)
      }
      console.log(arr)
      });
    return arr;
  }
};

export const store = new Vuex.Store({
  state: {
    // 전역적으로 사용되는 데이터
    todoItems: storage.fetch()
  }

});

$.store.state 로 접근시킨다.

<!--   name = 클래스명 tag = HTML 태그 -->
<transition-group name="list" tag="ul">
    <li v-bind:key="index" v-for="(todoItem, index) in this.$store.state.todoItems" class="shadow">
    .../
</ransition-group>