Vue.js实战学习笔记-----插件

一.概述

Vue.js提供了插件机制，可以在全局添加一些功能。它们可以简单到几个方法、属性、也可以很复杂，比如一整套组件库。

二.注册插件

（1）注册插件需要一个公开的方法install，它的第一个参数是Vue构造器，第二个参数是一个可选的选项对象。

（2）通过Vue.use()来使用插件

Vue.use(MyPlugin)
//或
Vue.user(MyPlugin,{
    //参数
})

（3）绝大多数情况下，开发插件主要是通过NPM发布后给别人使用的，在自己的项目中可以直接在入口调用以上的方法。

三.vue-router

（1）路由不同的页面实际上就是动态加载不同的组件。

（2）基础使用

1）Routers里每一项的path属性就是指定当前匹配的路径，component是映射的组件。

2）上面的写法，webpack会把每一个路由打包成一个js文件，在请求到该页面时，才去加载这个页面的js，也就是异步实现的懒加载（按需加载）。这种做法的好处是不需要在打开首页的时候就把所有的页面内容全部加载进来，只在访问时才加载。若非要一次性加载，可以这样写：

3）使用了异步路由后，编译出的每个页面的js都叫作chunk（块），它们命名默认是0.main.js、1.main.js.......，可以在webpack配置的出口output里通过设置chunkFilename字段修改chunk命名。

4）有了chunk后，在每个页面（.vue文件）里写的样式也需要配置后才会打包进main.css，否则仍然会通过JavaScript动态创建<style>标签的形式写入。配置插件：

5）在main.js里完成配置和路由实例

1.在RouterConfig里，设置mode为histoty会开启HTML5的History路由模式，通过“/”设置路径。

2.如果不配置mode，就会使用“#”来配置路径。

3.webpack-dev-server也要配置下来支持History路由，在package.json中修改dev命令：

增加了--history-api-fallback，所有的路由都会指向index.html

（3）使用<router-view>来挂载路由组件

1）<router-view>会根据当前路由动态渲染不同的页面组件。

2）路由切换时，切换的是<router-view>挂载的组件，其他的内容并不会变化。

（4）访问路径不存在时，重定向

（5）跳转

1.使用内置的<router-link>组件，它会被渲染为一个 <a>标签。

1）to是一个prop，指定需要跳转的路由，当然也可以用v-bind动态设置。

2）使用<router-link>，在HTML5的History模式下会拦截点击。避免浏览器重新加载页面。

3）<router-link>还有其他的一些prop，常用的有：

• tag

tag可以指定渲染成什么标签，比如<router-link to="/about" tag="li">渲染的结果就是<li>而不是<a>

• replace

使用replace不会留下History记录，所以导航后不能用后退键返回上一个压面，如<router-link to="/about" replace>

• active-class

当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个名为router-link-active的class，设置prop：active-class可以修改默认的名称。在做类似导航栏时，可以使用该功能高亮显示当前页面对应的导航菜单栏，但是一般不会修改active-class，直接使用默认值router-link-active就可以。

2.使用router实例的方法

$router还有其他一些方法：

• replace

类似于<router-link>的replace功能，它不会向history添加新记录，而是替换掉当前的history记录，如this.$router.replace('/user/123');

• go

类似于window.history.go()，在history记录中前进或者后退多少步，参数是整数，例如：

//后退1页
this.$router.go(-1);
//前进2页面
this.$router.go(2);

（6）高级用法

1.导航钩子beforeEach和afterEach

1）它们会在路由即将改变前和改变后触发。

2）设置网页标题

3）导航钩子有3个参数

• to    即将要进入的目标的路由对象
• from   当前导航即将要离开的路由对象
• next   调用该方法后，才能进入下一个钩子

4）路由列表的meta字段可以自定义一些信息，比如我们将每个页面的title写入了meta来统一维护，beforeEach钩子可以从路由对象to里获取meta信息，从而改变标题。

5）提升用户体验

1.比如一个页面较长，滚动到某个位置，再跳转到另一个页面，滚动条默认是在上一个页面停留的位置，而好的体验肯定是能够返回顶端。通过钩子afterEach就可以实现:

2.从一个页面过渡到另一个页面时，可以出现一个全局的Loading动画，等到新页面加载完后再结束动画。

6）next（）方法还可以设置参数，比如如下面场景

next（）参数设置为false时，可以取消导航，设置为具体的路径可以导航到指定的页面。

四.状态管理与VueX

（1）基本用法

1.VueX的设计就是用来统一管理组件状态的，它定义了一系列规范来使用和操作数据，使组件应用更加高效。

2.仓库store包含了应用的数据（状态）和操作过程。VueX里的数据都是响应式的，任何组件使用同一store的数据时，只要store的数据变化，对应的组件也会立即更新。

3.数据保存在VueX选项的state字段内

4.在任何组件内，可以直接通过$store.state.count读取：

5.来自store的数据只能读取，不能手动改变，改变store中数据的唯一途径就是显式地提交mutations。

6.mutations是VueX的第二个选项，用来直接修改state里的数据。

7.在组件内，通过this.$store.commit方法来执行mutations。

组件只负责提交一个事件名，VueX对应的mutations来完成业务逻辑。

8.mutations还可以接受第二个参数，可以是数字、字符串或对象等类型。

当一个参数不够用时，可以传入一个对象，无限扩展。

9.提交mutations的另一种方式是直接使用包含type属性的对象。

注意：mutations里尽量不要异步操作数据。若果异步操作数据了，组件在commit后，数据不能立即改变，而且不知道什么时候会改变。

（2）高级用法

VueX还有其他3个选项可以使用：getters、actions、modules。

1.getters

1）用法与组件的计算属性非常像。

2）getter也可以依赖其他的getter，把getter作为第二个参数。

2.actions选项

1）action与mutation很像，不同的是action里面提交的是mutation，并且可以异步操作业务逻辑。

2）action在组件内通过$store.dispatch触发。

3）异步示例

4）mutations、actions看起来很相似，可能会觉得不知道该用哪个，但是VueX很像是一种与开发者的约定，所以涉及改变数据的，就使用mutations，存在业务逻辑的，就用actions。至于将业务逻辑放在action里还是Vue组件里完成，就需要根据实际场景拿捏了。

3.modules选项

1）用来将store分割到不同模块。

2）当你的项目足够大时，store里的state、getters、mutations、actions会非常多，都放在main.js里显得不是很友好，使用modules可以把它们写到不同的文件中。

3）每个module拥有自己的state、getters、mutations、actions，而且可以多层嵌套。

4）module的mutation和getter接收的第一个参数state是当前模块的状态。

5）在actions和getters中，还可以接收一个参数rootState，来访问根节点的状态。

五.中央事件总线插件vue-bus

用于解决跨级和兄弟组件通信的问题。

1.封装为插件

2.通过插件的形式使用后，所有组件都可以直接使用$bus，而无需每个组件都导入bus组件。

3.注意

1）$bus.on应该在created钩子内使用，如果在mounted使用，它可能接收不到其他组件来自created钩子内发出的事件。

2）使用了$bus.on，在beforeDestroy钩子里应该再使用$bus.off解除，因为组件销毁后，就没必要把监听的句柄储存在vue-bus里了。

六.$ajax插件