Vue实战狗尾草博客后台管理系统第七章

 

Vue实战狗尾草博客后台管理平台第七章

本章内容为借助模块化来阐述Vuex的进阶使用。

在复杂项目的架构中，对于数据的处理是一个很是头疼的问题。处理不当，不只对维护增长至关的工做负担，也给开发增长巨大的压力。

在大量的实战开发过程当中，狗尾草总结出来的较为友好的方式是 使用一个单独的数据管理库去管理数据。

这样不会给页面增长额外的负担。且API的调用也属于数据处理/获取的部分。所以也放在数据管理下统一管理

注：本章节内容与狗尾草博客管理平台没有任何关系，仅做为Vuex的进阶使用来分享

对模块化的简单阐述

在开始时，咱们须要先对模块对有一个清晰的定义！

这里不扯AMD与CMD规范。

简单论述为：对于复杂系统的开发。制做清晰的分界。广义上讲就是将一湖的水进行"渠道化分流"。可是微观上确实有很是多的东西，且能够根据具体的项目进行具体的场景分析从而进行设计。

上面所说也能够理解为模块的理解或者使用场景。

如何实现

在平时的开发中，咱们能够对什么进行模块化？

咱们须要一个目标，这个目标做为系统来理解。那咱们就必须知道的是，咱们的系统有哪些功能与业务。必须有一个清晰的四位导图来支撑。

就日常的系统来说。所必需的的有不一样功能的业务。这些业务在是实现的过程当中，又分为：view，style，js。这些又能够进行划分为：组件的抽离,样式的抽离,工具类的抽离,静态资源的抽离。再次基础上一个页面就已经能够呈现到屏幕上了。可是他仍是静态的，仍是由咱们Mock数据所支撑。并没有鲜活数据的支撑。此时。咱们就能够对数据进行抽离。

为何要作模块化抽离？或者说这样作有什么好处呢？

简单说模块化意义就在于数据的可视化,便捷的管理,数据的挖掘,系统的维护,系统更为清晰的架构。固然其真实的意义与优点只有在具体的开发并实践后才有所呈现。且会根据不一样系统呈现不一样结果。你永远不会知道这么作会给你带来什么Surprise！

补充：让开发者对系统有更好的可控性，或许这也是模块化的意义之一。

API抽离

请求接口抽离，做为单独模块进行统一的管理，对于后端接口的服务，在前端也会有更好的结构认识。同时在使用时也会更加便捷。

eg：

commons下能够放置咱们共用的一些api模块

modules则能够对api再次进行模块化划分。

好比后端的接口服务有a服务，b服务，c服务。name咱们也就能够按照a服务，b服务，c服务进行划分。

可是这里狗尾草不建议这样来配置。由于后端所用服务并不定是咱们须要的。其命名也常常是一些生僻的单词，尝尝会令新加入的developer感到无力。

这里狗尾草提出的一个合理化的解决方案即是根据前端的项目的业务来划分或者前端的服务来划分。好比说用户服务(登陆，注册，修改，忘记密码，权限，我的信息等)，文章服务(标题，内容，更改，删除，草稿等等)。

固然这里提出的合理化的解决方案不只如此，咱们也须要在项目的README.md的文件中对api模块的划分作出合理的解释。这样对于新加入项目的同事也不会有太大的困惑。

base.js的话咱们则能够进行域名的配置。根据项目不一样的环境进行动态的配置。开发环境的域名，测试环境的域名。预发布环境的域名，生产环境的域名等等。这里又能够经过不一样的启动命令来动态配置。(这里的配置由于每一个脚手架所建立项目各有所异。所以暂不作详情说明)

api的配置结束，咱们就须要一个出口文件，供其余模块进行调用。index.js则是一个很好的出口。

import serverA from './modules/serverA';
import serverB from './modules/serverB';
export default {
  serverA,
  serverB
}

这样一个api模块，咱们就简单的抽离了出来。剩下的至于在项目中怎么使用，咱们就不须要过多操心。可是好的方式的挂在global下，供全局的更为便捷的使用。

例如在Vue中，咱们即可以经过install到Vue.prototype上来实现

import api from '@/api';
const install = (Vue,opts = {}) {
  if (install.installed) return;
  Vue.prototype.$api = api;
}
export default install;

main.js

import Utils from './utils';
Vue.use(Utils);

this.$api.模块.具体的api接口 用此方式即可更为方便的对api进行使用。固然有一个缺点是过多的东西挂载在原型链上。Vue的性能则会受到影响，可是相较于系统中频繁操做的api来言。却能够省略了。

固然API的抽离也仅仅是繁多模块化开发中的一个。

Pages抽离

Pages抽离其实并没有特殊的意义，理解成本意就好。页面的抽离

这里的页面的抽离，咱们则不能经过功能来进行拆分了，咱们须要根据业务来走啦。

给你们一个最直观的理解：你们能够看看管理系统的菜单栏部分。一级菜单，二级菜单等等。你们的业务的流程即可以根据这些来走。

每一个一级菜单做为一个大的pages来抽离

页面的设计架构咱们即可以如此进行：

pages

pages1

components

data

router.js

static

pages2

components

data

router.js

static

简单阐述就是多个大型的业务模块。具体拆分为多个页面模块，此多个页面模块的路由在此业务下统一管理，常量资源，业务的Private Component,数据的管理也都在此模块下作统一处理。

其意义直观上来看，多个业务之间并无任何的耦合。并不会形成业务逻辑样式等得污染。

Router抽离

建立主路由并建立拦截，以拦截作出路由的主出口。

在此基础上对各个业务模块进行单独的路由拆分，以达到模块抽离的各个方面，并将模块使用到其余项目中，也依然可使用。

eg:

Router/index.js主路由

import Vue from 'vue';
import Router from 'vue-router';
import { Route as RouterA } from '@/pages/xxx';
import { Route as RouterB } from '@/pages/xxx';
Vue.use(Router);
export const constantRouterMap = [
 路由的配置
  ...RouterA,
  ...RouterB,
]

模块化中的路由拆分，咱们则能够认为模块化中的路由为此模块的入口

eg: 某模块的入口

Modeal/index.js

export const Route = [
  {
    xxx：xxx路由配置
  }
]

入口已配置，剩下的就在上述的代码中操做加入总的路由中，在后续路由的更改时，只须要在相应的模块中修改便可。减小了很大程度上的耦合。

基本的模块的开发就如上述那样，循规蹈矩，却又加入项目场景，通过深思熟虑作出合理魔窟阿化！

下来也就是本章的另外一个重点。Vuex的进阶使用。

数据的统一管理之Vuex的进阶使用

基础的东西很少作解释，大佬们都懂得。Vuex为Vue提供了很好的数据管理方式。

Vuex is a state management pattern + library for Vue.js applications.

在使用以前，咱们必须先思考，咱们用它能够干什么？

简单举例来讲明：

若是没有这样的一个数据的管理库，那么咱们在开发时，不可避免的要经历这样的过程。n多页面之间共享数据，或组件间数据的传递。a传b，b传c，c传d，甚至会更加复杂。

从数据管理的第三方库出来后，咱们便不须要这种的方式进行数据的传输。

Vue中的Vuex，React中的Redux。

Vuex的简单的流程

State： 数据的存储

Getters：state中数据的过滤，更便捷的获取

Mutations： state中数据的操做

Actions：异步请求的操做，能够理解为数据的init

modules：状态库的模块化管理

使用的流程串起来简单说就是 view 读取state数据并进行render。交互操做时，经过mutations对state数据进行更新。页面初始化派发action请求获取初始化数据。

多个页面之间须要共享数据时，只须要从store中取值就好。

当项目复杂程度较小时，咱们能够在根目录下经过store/modules的结构来拆分状态库，经过index.js来提供主出口便可。

前几篇文章中使用到的store的使用就是如此。

可是当项目复杂度提高时，咱们就必须设计插拔式管理。

import Vue from 'vue';
import Vuex from 'vuex';
import storeA from '@pages/xxx/store';
Vue.use(Vuex);
export default new Vuex.Store({
  xxx,
  xxx,
  xxx,
  xxx,
  modules: {
    ...storeA
  }
})

将store的管理也进行拆分管理。对组件化，模块化更深层次的配置。使各个模块在互相不依赖的状况下，也依旧不影响使用。低耦合，高复用！

若是须要对store作一个总结的话，那就是每一个Pages模块拥有本身的状态管理库，本身的常量配置，本身的私有组件，在任何状况下，每一个模块都能独立运行。无疑是对高复用，低耦合的很好的实现.

具体使用场景以下：

eg:

import { mapGetters,mapActions, mapMutations } from 'vuex';  
computed: {
  ...mapGetters('模块名',['state1','state2'])
},// state的映射，在不一样模块中，取出不一样的模块下的数据
...mapActions('模块名',['request1','request2']),//映射出相关模块下对应的异步请求，并在须要的时候派发出去。
...mapMutations('模块名',['stateopt1','stateopt2']);//对state的操做也能够在页面中进行。可是通常不建议在页面中对state进行操做。