在大项目中，Vuex的结构如何搭建？

当我们在开发大项目时，假设在Vuex中还是没有使用modules，那么我们的state、mutations、actions将会变得十分凌乱和杂乱无章，那么下面我们使用modules，不仅要使代码简洁，还要使得结构更清晰。

我之前写了一篇关于Vuex的基础用法，初学者可以参考，Vuex基础。基础用法只能用于学习新知识，当有了基础之后，我们就需要重构代码。

Vuex结构：

我在store目录下创建了modules、getters.js、index.js文件，而modules中又创建了三个模块。

下面分别在三个模块中写入简单代码：

app.js:

const state = {
   
  count: 5,
  device: 'desktop',
}
const mutations = {
   
  SET_COUNT: (state, count) => {
   
    state.count = count
  },
}

const actions = {
   
  setCount({
    commit }, count) {
   
    commit('SET_COUNT', count)
  },
}

export default {
   
  namespaced: true,
  state,
  mutations,
  actions,
}

permission.js:

const state = {
   
  roles: ['admin', 'user'],
}
const mutations = {
   
  getRoutes: (state) => {
   
    return state.roles
  }