近期将公司APP项目整体升级到Vue2.x，并随之升级了Vuex，重新设计了一下项目工程的整体框架结构，大体如下：
首先，App应用部分，主要包含项目各个主页面，每一个主页面下包含vue模板、静态页面容器、入口执行脚本、仓库（store）。
- vue模板：主要是vue实例对象和dom模板
- 静态页面容器：就是一个静态的页面外皮
- 入口执行脚本：主要功能是实现vue实例的创建，Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)），在创建vue实例的时候，我们把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
- 仓库（store）：store是Vuex应用的核心，store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)，再次我们创建store实例对象，并在“入口执行脚本”中作为Vue实例的store选项，将此store实例注入所有子组件
其次，Components组件部分，主要包含项目各个组件，每一个组件都提供一个Interface接口对象，该接口对象提供组件的所有核心，即State、Getters、Mutations、Actions、Modules。
- State：组件数据源
- Getters：访问器，用于访问组件数据源中的每个state，还可以对数据源进行筛选过滤
- Mutation-Types：变更事件类型集
- Actions:Action 类似于 mutation，但Action 提交的是 mutation，而不是直接变更状态，另外，Action 可以包含任意异步操作
对象mutation类似于事件，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，但是motation只能用于处理同步操作。这里将常量Mutations类型放在单独的文件中，只是为了结构清晰，我们在Interface中关联所有Mutation-Types和对应的回调函数。
为了进一步区分常量Mutations类型和getters，我们在定义常量Mutations类型和getters访问器名称的时候，使用组件前缀进行区分，简化多兄弟组件的重名问题。
下面，介绍一下公共组件：“职位列表”的设计，“职位列表“特点如下：
- DOM结构相似，但有不同之处
- 数据请求url不同
- 数据请求结果处理不同
根据以上特点，我们将数据源设计如下：
- canNextRequest： 对外提供是否需要请求下一页数据
局部数据如下：
// 是否过滤数据
uniqueFn: this.comListArgs.uniqueFiled ? Util.unique(this.comListArgs.uniqueFiled) : false,
// 页码
page: 1,
// 页数
pageSize: this.comListArgs.pageSize || 20,
// 底部load
bomLoading: {
loading: false,
noMore: false
},
// 快速双击记录状态
clickedItem: {},
//大家都在找tags数据状态
loadListStatus: ‘’,
isfirstPage: true
对外提供属性如下：
// 监测父组件是否需要请求
comListQueryRecognition: {
type: String,
default: ‘’
},
// 组件参数对象
comListArgs: {
type: Object,
default: function() {
return {};
}
},
// 下一页回调
comListNextFun: {
type: Function,
default: function() {}
},
//设置是否有优选标签
isYouxuan: {
type: Boolean,
default: true
}
并且，我们通过watch来监听comListQueryRecognition属性，已监测父组件是否需要请求，如果comListQueryRecognition状态变更，则去后天请求列表数据，这里我们需要注意的是，我们怎么区分是刷新列表还是请求下一页数据呢，因此，我们要去父组件在更改comListQueryRecognition状态的时候，加上标识，比如”loadPage“ or ”nextPage“，为了触发子组件comListQueryRecognition状态的更新，我们将在父组件中使用时间戳来触发子组件对comListQueryRecognition状态的监听。
comListArgs组件参数对象，用于设置组件发送请求的参数、需要组件特殊处理的标识，比如是否显示DOM结构中的广告模块，以及子组件中职位列表的数据。
由于，数据请求结果处理不同，因此我们在ajax数据请求回来以后，会针对success、error、nonetwork三种状态，触发组件的三个自定义事件，并将返回数据推给父组件，因此，我们需要在父组件中注册这三个事件，并提供对应的处理函数，在处理函数中，我们将对返回数据进行包装处理，并通过comListArgs传回组件中进行数据的渲染。