[Vue2] Vue Vuex State

Vuex state이란?

사용 방법

state을 실행하기 위해서는 Commponent의 computed 영역 내에 작성을 해야한다.

Store>index.js

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: { // 공통 관리되는 상태값을 관리,  접근방법- this.$store.state.items
        todos: [ 
            {id:1, text:'buy a car',  checked:false },
            {id:2, text:'play game',  checked:false },
        ]
    },
    mutations: {

    },
    actions: {

    },
    getters: {

    }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

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

 

예시

App.vue에 있는 data를 store>index.js 옮김

 

 

 

Vue.js

<template>
  <div id="app" class="container">
    <h1 class="text-center">Todo App</h1>
    <CompletedTodo />
    <AddTodo @add-todo="addTodo" />
    <hr>
    <TodoList 
      @toggle-checkbox="toggleCheckbox"
      @click-delete ="deleteTodo"
    />
  </div>
</template>

props를 지운다.

Store > index.js

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: { // 공통 관리되는 상태값을 관리,  접근방법- this.$store.state.items
        todos: [ 
            {id:1, text:'buy a car',  checked:false },
            {id:2, text:'play game',  checked:false },
        ]
    },
    mutations: {

    },
    actions: {

    },
    getters: {

    }
})

 

CompletedTodo.vue

<template>
    <div>
        Completed Todo: {{ numberOfCompletedTodo }}
        {{ todos }}
    </div>
</template>

<script>
export default {
    // todo를 checked하면 그 갯수를 보여주는 것
    computed: {
        // todos 값을 store의 state의 값을 찾으면 된다.
        todos() {
            return this.$store.state.todos;
        },
        numberOfCompletedTodo() {
            return this.todos.filter(todo => todo.checked).length;
        }
    }
}
</script>

props 속성을 지우고 대신에 computed 메소드에 $store.state.todos 를 넣으면 된다.

 

todos 실행 화면

TodoList.vue

<script>
    computed: {
            todos() {
                return this.$store.state.todos;
            }
        },
</script>

마찬가지로 props 속성을 지우고 대신에 computed 메소드에 $store.state.todos 를 넣으면 된다.

todos 실행 화면

App.vue에  데이터가 없기도 하고 store.state의 값을 조절을 해야된다.

 

참고 영상

https://tinyurl.com/4s42cmr2

뷰js 2 (Vue.js 2) 기초 익히기 기본 강좌!