通过一个简单的例子学会vuex与模块化

前言

Vuex 强调使用单一状态树，即在一个项目里只有一个 store，这个 store 集中管理了项目中所有的数据以及对数据的操作行为。但是这样带来的问题是 store 可能会非常臃肿庞大不易维护，所以就需要对状态树进行模块化的拆分。

这篇文章预设你已经了解vue相关的基础知识，因此本文不再赘述。需要学习的朋友可以参考这篇文章://www.jb51.net/article/110212.htm

对vuex的定位和解释可以看官方文档，说的很详细了，需要的朋友也可以通过这篇文章进行详细的了解：//www.jb51.net/article/111582.htm

本文主要从实用的角度写一写如何在实际项目中使用vuex，例子真的很简单（简陋），但是主要是理解这种思维就好。

示例教程

例子是在vue-cli基础上构建的，以下是src文件下的内容目录。

├── App.vue
├── components // 组件文件夹
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
 ├── action.js // action
 ├── getter.js // getter
 ├── index.js // vuex的主文件
 ├── module // 模块文件
 │ ├── tab2.js
 │ └── tab3.js
 ├── mutation-type.js // mutation常量名文件
 └── mutation.js // mutation

效果是这样的（不要嫌弃简陋啊啊啊）

在这个例子里，把文档里提到的vuex的相关知识都使用了一遍，包括模块相关的知识，基本把一般的使用场景都覆盖了吧。

那不废话了，开始吧。

首先app.vue和router两部分是和路由相关，就是很简单的东西，看看文档就能了解。

vuex的模块化

在写这个例子之前看了很多的开源项目的代码，一开始蛮新鲜的，毕竟之前项目中并没有深度使用过vuex，基本就是一个store.js里把vuex的功能就都完成了，但是项目复杂肯定不能这么写，正好现在有这个需求，我就想写个例子理一理这方面的思路。结果还是蛮简单的。

store文件里的内容就是按照vuex五个核心概念建立的，这么做的好处对于梳理业务逻辑和后期维护都是极大的方便，比如mutation.js和mutation-type.js这两个文件：

// mutation-type.js

const CHANGE_COUNT = 'CHANGE_COUNT';


export default {
 CHANGE_COUNT
}

// mutation.js

import type from './mutation-type'

let mutations = {
 [type.CHANGE_COUNT](state) {
 state.count++
 }
}

export default mutations