다음과 같은 store  index.js 파일을

 

index.js

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

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        //data 데이터
        todos: [
            { id: 1, text: "buy a  car", checked: false },
            { id: 2, text: "paly a game", checked: true },
            { id: 3, text: "buy a  gg", checked: false },
        ],

        users: []
    },

    mutations: {
        //데이터를 실질적으로 바꾸는 역할
        ADD_TODO(state, value) {
            state.todos.push({
                id: Math.random(),
                text: value,
                checked: false
            });

        },

        TOGGLE_TODO(state, { id, checked }) {
            const index = state.todos.findIndex(todo => {
                return todo.id === id;
            });
            state.todos[index].checked = checked;
        },

        DELETE_TODO(state, todoId) {
            const index = state.todos.findIndex(todo => {
                return todo.id === todoId;
            });
            state.todos.splice(index, 1);
        },

        SET_USERS(state, users) {
            state.users = users;
        }

    },

    actions: {
        //methods   함수

        addTodo({ commit }, value) {
            setTimeout(() => {
                commit('ADD_TODO', value);
            }, 500);
        },

        toggleTodo({ commit }, payload) {
            setTimeout(() => {
                commit('TOGGLE_TODO', payload);
            }, 500);
        },

        deleteTodo({ commit }, todoId) {
            setTimeout(() => {
                commit('DELETE_TODO', todoId);
            }, 500);
        },

        getUsers({ commit }) {
            axios.get('https://jsonplaceholder.typicode.com/users',).then(
                res => {
                    console.log(res.data);
                    commit('SET_USERS', res.data);
                });
        }
    },

    getters: {
        //computed   역할
        numberOfCompletedTodo: state => {
            return state.todos.filter(todo => todo.checked).length;
        }
    }


});

 

 

 

 

 

 

1.  index.js , modules/todo.js  ,  modules/user.js     세개의 파일로 분리

 

 

1) index.js

strict: true  설정 

import Vue from 'vue';
import Vuex from 'vuex';
import todo from './modules/todo';
import user from './modules/user';

Vue.use(Vuex);

export default new Vuex.Store({
    strict: true,
    modules: {
        todo: todo,
        user: user
    }
});

 

 

 

2) modules/todo.js

namespaced: true 추가

export default {
    namespaced: true,

    state: {
        todos: [
            { id: 1, text: "buy a  car", checked: false },
            { id: 2, text: "paly a game", checked: true },
            { id: 3, text: "buy a  gg", checked: false },
        ],


    },

    mutations: {
        //데이터를 실질적으로 바꾸는 역할
        ADD_TODO(state, value) {
            state.todos.push({
                id: Math.random(),
                text: value,
                checked: false
            });

        },

        TOGGLE_TODO(state, { id, checked }) {
            const index = state.todos.findIndex(todo => {
                return todo.id === id;
            });
            state.todos[index].checked = checked;
        },

        DELETE_TODO(state, todoId) {
            const index = state.todos.findIndex(todo => {
                return todo.id === todoId;
            });
            state.todos.splice(index, 1);
        },


    },

    actions: {
        //methods   함수

        addTodo({ commit }, value) {
            setTimeout(() => {
                commit('ADD_TODO', value);
            }, 500);
        },

        toggleTodo({ commit }, payload) {
            setTimeout(() => {
                commit('TOGGLE_TODO', payload);
            }, 500);
        },

        deleteTodo({ commit }, todoId) {
            setTimeout(() => {
                commit('DELETE_TODO', todoId);
            }, 500);
        },


    },

    getters: {
        //computed   역할
        numberOfCompletedTodo: state => {
            return state.todos.filter(todo => todo.checked).length;
        }
    }


};

 

 

 

 

3)  modules/user.js 

import axios from 'axios';
export default {
    namespaced: true,

    state: {
        users: []
    },

    mutations: {
        SET_USERS(state, users) {
            state.users = users;
        }

    },

    actions: {

        getUsers({ commit }) {
            axios.get('https://jsonplaceholder.typicode.com/users',).then(
                res => {
                    console.log(res.data);
                    commit('SET_USERS', res.data);
                });
        }
    },



}

 

 

 

 

 

 

2. 사용법 예

 

dispatch

 this.$store.dispatch('todo/deleteTodo', this.todo.id);

 

 

getters

this.$store.getters["todo/numberOfCompletedTodo"];

 

mapState, mapActions

<template>
    <div>
         <div v-for="user in users" :key="user.id">
                {{user.name}}
        </div>
    </div>
</template>
<script>
    import {mapState, mapActions} from 'vuex';
    export default {
      created(){
          this.$store.dispatch('user/getUsers');         
      },

      computed:{
          ...mapState({
             users:state=>state.user.users
          })
      },
      methods:{
          ...mapActions('user',['getUsers'])
      }
    }
</script>