뷰엑스 101

코드 조각

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

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

import Vuex from 'vuex';
import Vue from 'vue';
import todos from './module/todos';

// Load Vuex
Vue.use(Vuex);

// Create store

export default new Vuex({
    modules: {
        todos
    }
});

import axios from 'axios'; 
// we use axios to fetch data from remote API

const state = {
    todos: []
};

const getters = {
    allTodos: (state) => state.todos;
};

const actions = {
    async fetchTodos({commit}) {
        const reponse = await axios.get('jsonplaceholder.typicode.com/todos');

        commit('setTodos', reponse.data);
    }
};

const mutations = {
    setTodos: (state, todos) => (state.todos = todos);
};


export default {
    state,
    getters,
    actions,
    muations
};

<template>
    <div>
        <h3> Todos </h3>
        <div class="todos">
            <div v-for="todo in allTodos" :key="todo.id">
                {{ todo.title  }}
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    name: 'Todos',
    methods: {
        ...mapActions(['fetchTodos'])
    },
    computed: {
        ...mapGetters(['allTodos'])
    },
    created() {
        this.fetchTodos()
    }
}
</script>

<style>
</style>