[VUE + TYPESCRIPT] Vuex Interface를 구현하는 Store

VUE.JS 목록

 

Vuex Store의 기본 형식 입니다.

<script lang="ts">
import Vue from 'vue';
import Vuex, {StoreOptions} from 'vuex';

Vue.use(Vuex);

interface State {
    // 상태값에 대한 인터페이스
}

const Store: StoreOptions<State> = {
    state: {
        // 상태값
    },
    mutations: {
        // 상태 변이 함수
    },
    actions: {
        // 상태 변이를 위한 로직
    },
    getters: {
        // 계산된 값일 반환
    }
}

export default new Vuex.Store(Store);
</script>

 

$ touch src/store.ts

store.ts 파일을 생성하고 아래와 같이 코딩 합니다.

import Vue from 'vue';
import Vuex, {ActionContext, StoreOptions} from 'vuex';

Vue.use(Vuex);

interface State {
    count: number;
}

const store: StoreOptions<State> = {
    state: {
        count: 0,
    },
    mutations: {
        setCount(state: State, count: number) {
            state.count = count;
        },
    },
    actions: {
        increase({state, commit}: ActionContext<State, State>) {
            commit('setCount', this.state.count + 1);
        },
        decrease({state, commit}: ActionContext<State, State>) {
            commit('setCount', this.state.count - 1);
        },
    },
    getters: {
        count: (state: State) => state.count,
    },
};

export default new Vuex.Store(store);

 

$ src/components/MyCount.vue

MyCount.vue 파일을 생성하고 아래와 같이 코딩합니다.

<template>
    <div>
        {{ $store.getters.count }}
    </div>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';

export default class MyCount extends Vue {}
</script>

 

src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <my-count></my-count>
    <button @click="increase">증가</button>
    <button @click="decrease">감소</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Provide } from 'vue-property-decorator';
import MyCount from '@/components/MyCount.vue';

@Component({
    components: {
        MyCount,
    },
})

export default class Home extends Vue {
    increase() {
        this.$store.dispatch('increase');
    }
    decrease() {
        this.$store.dispatch('decrease');
    }
}
</script>

 

 

 

 

VUE.JS 목록