Vuex分模块项目结构管理

众所周知，在Vue项目中，使用Vuex可以很好的进行共享数据的管理。官方给出了4个核心概念，分别是state,mutations,actions,getters，具体每个概念的作用这里就不细细介绍了。通常在实际项目中，需要比较多的共享数据需要管理，不可能所有的内容都写在一个js文件中，因此对项目结构进行模块化管理就变得非常必要。接下来就介绍一下常用的项目结构管理的两种方式。

1，使用官方提供的的modules进行管理

这种方式是将每种需要管理的数据单独出来一个文件，每个文件中有state,mutations,actions,只负责针对当前文件都数据进行管理。然后再实例化Store时，通过modules注入。
目录结构如下：

store  文件夹
  |- modules 管理模块文件夹
      |- tagsView.js
          const tagsView = {
            state: {
               visitedViews: []
            },
             mutations: {
               ADD_VISITED_VIEWS: (state, view) => {
                 // do something....
                },
            actions: {
                addVisitedViews: ({commit}, view) => {
                  commit('ADD_VISITED_VIEWS', view)
                  }
              }
          }
          export default tagsView
      |- 更多模块.....

  |- getters.js  获取所有模块状态管理的数据
     const getters = {
        visitedViews: state => state.tagsView.visitedViews,
        .....获取更多数据
      }
      export default getters

  |- index.js  入口文件，进行实例化
      import Vue from 'vue'
      import Vuex from 'vuex'
      import tagsView from './modules/tagsView'
      import getters from './getters'
      Vue.use(Vuex)
      const store = new Vuex.Store({
          modules: {
            tagsView,
            .......更多模块
          },
          getters
      })
      export default store
      //然后再`main.js`中实例化`Vue`时引入index.js文件，注入store

2，按概念分文件进行管理

即将所有共享数据放在state中，将修改数据的方法放在mutations中，将异步调用方法放在actions中，将获取共享数据方法放在getters中。项目结构如下：

store 状态管理文件夹
    |- state.js  共享数据管理文件
        const state = {
            visitedViews: []
        }
        export default state

    |- mutation-types.js  修改类型文件
        export const ADD_VISITED_VIEWS = 'ADD_VISITED_VIEWS'
    |- mutations.js  修改共享数据方法文件
        import * as types from './mutation-types'
        const mutations = {
            [types.ADD_VISITED_VIEWS] (state, view) {
              // do something....
            }
        }
        export default mutations
    |- actions.js  异步更改数据文件
        import * as types from './mutation-types'
        actions: {
          addVisitedViews: ({commit}, view) => {
              commit(types.ADD_VISITED_VIEWS, view)
          }
        }
    |- getters.js  获取共享数据文件
        const visitedViews = state => state.visitedViews
    |- index.js  入口实例化文件
        import Vue from 'vue'
        import Vuex from 'vuex'
        import state from './state'
        import mutations from './mutations'
        import * as getters from './getters' // 这种导入方式表示一次性导入模块内所有导出数据并命名，是一个对象
        import * as actions from './actions'
        Vue.use(Vuex)
        const store = new Vuex.Store({
          state,
          mutations,
          getters,
           actions
        })
        export default store