vuex的使用——modules模块化，源代码

上一篇博客已经介绍了关于vuex的基本用法以及store里的四项该怎么写，这一篇主要就是写一下将store模块化的怎么写，再此放上目录及代码!
store文件夹目录：

1、main.js

import store from './store/store'

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

2、store.js

import Vuex from 'vuex';
import Vue from 'vue';
import count from './modules/count';
import todos from './modules/todos';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    count,
    todos 
  }
});

3、count.js

const state = {
  count: 0
};

const getters = {
  count: state => {
    return state.count;
  }
};

const mutations = {
  incrementCount(state) {
    state.count++;
  },
  decrementCount(state, payload) {
    state.count -= payload.amout;
  }
};

const actions = {
  incrementCountAsync({ commit }) {
    setTimeout(() => {
      commit('incrementCount');
    }, 2000);
  },
  decrementCountAsync({ commit }, payload) {
    setTimeout(() => {
      commit('decrementCount', payload);
    }, 1000);
  }
};

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

4、todos.js

const state = {
  todos: [
    {
      id: 1,
      title: 'todo item 1',
      completed: true
    },
    {
      id: 2,
      title: 'todo item 2',
      completed: true
    }, 
    {
      id: 3,
      title: 'todo item 3',
      completed: false
    }
  ]
};

const getters = {
  completedTodos: state => {
    return state.todos.filter(todo => todo.completed);
  },
  completedTodosCount: (state, getters) => {
    return getters.completedTodos.length;
  },
  getTodosById: state => id => {
    return state.todos.find(todo => todo.id === id);
  }
};

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

const actions = {
  async fetchTodos({ commit }) {
    const response = await axios.get(
      'http://jsonplaceholder.typicode.com/todos'
    );
    console.log(response);
    commit('setTodos', response.data);
  }
};

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

5、.vue文件

<template>
	<div class='container'>
	   <!-- state & getters -->
	    <p>{{count}}</p>
	    <p>{{completedTodos}}</p>
	    <p>{{completedTodosCount}}</p>
	    <p>{{getTodosById(3)}}</p>
	
	    <!-- mutations -->
	    <button @click="decrementCountAsync({amout: 1})">-</button>
	    <span>{{count}}</span>
	    <button @click="incrementCountAsync">+</button>
	
	    <!-- fetchTodos -->
	    <br>
	    <br>
	    <div>{{completedTodos}}</div>
	
	    <button @click="fetchTodos">拉取api接口数据</button>
	
	</div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "app",
  components: {},
  computed: mapGetters([
    "count",
    "completedTodos",
    "completedTodosCount",
    "getTodosById"
  ]),
  // methods: mapMutations(["incrementCount", "decrementCount"])
  methods: mapActions([
    "incrementCountAsync",
    "decrementCountAsync",
    "fetchTodos"
  ])
  // methods: {
  //   increment() {
  //     // console.log(1);
  //     // 触发mutation里的方法
  //     // this.$store.commit("incrementCount");

  //     // actions
  //     this.$store.dispatch("incrementCountAsync");
  //   },
  //   decrement(m) {
  //     // console.log(0);
  //     // this.$store.commit("decrementCount", m);

  //     // actions
  //     this.$store.dispatch("decrementCountAsync", m);
  //   },
  //   fetchTodos() {
  //     this.$store.dispatch("fetchTodos");
  //   }
  // }

  // getters & mapGetters
  // computed: {
  //   count() {
  //     return this.$store.getters.count;
  //   },
  //   completedTodos() {
  //     return this.$store.getters.completedTodos;
  //   },
  //   completedTodosCount() {
  //     return this.$store.getters.completedTodosCount;
  //   },
  //   getTodosById() {
  //     return this.$store.getters.getTodosById;
  //   }
  // }

  // state & mapState
  // computed: mapState(["count", "todos"])
  // computed: mapState({
  //   count: state => state.count,
  //   todos: state => state.todos
  // })
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  //   todos() {
  //     return this.$store.state.todos;
  //   }
  // }
};
</script>

<style scoped>
.container{
width:100%;
color: blue;
}
</style>