当前位置：移动技术网 > IT编程>开发语言>JavaScript > 简简单单的Vue3（插件开发，路由系统，状态管理）

简简单单的Vue3（插件开发，路由系统，状态管理）

2019年01月18日 | 移动技术网IT编程 | 我要评论

既然选择了远方，便只顾风雨兼程 __ hans许

系列：

那在上篇文章，我们讲了，vue的生命周期，vue的组件,那这篇文章我们讲下更进阶的：插件，路由，状态管理。

插件

插件通常会为 vue 添加全局功能。插件的范围没有限制——一般有下面几种：

添加全局方法或者属性，如: vue-custom-element
添加全局资源：指令/过滤器/过渡等，如 vue-touch
通过全局 mixin 方法添加一些组件选项，如: vue-router
添加 vue 实例方法，通过把它们添加到 vue.prototype 上实现。
一个库，提供自己的 api，同时提供上面提到的一个或多个功能，如 vue-router

使用插件
使用全局方法vue.use(myplus)，就可以使用了，但在此事前要引用插件的js，直接引用或者npm i myplus进行安装，然后import myplus from myplus。
开发插件

vue.js 的插件应该有一个公开方法 install。这个方法的第一个参数是 vue 构造器，第二个参数是一个可选的选项对象：简单来讲，就是自己扩展vue。

var myplugins= {
    install(vue, options) {
        vue.$data = {
            firstname: "大漠",
            lastname: "w3cplus"
        };
        console.log(`${vue.$data.firstname}_${vue.$data.lastname}`);

        // 2. 添加全局资源
        vue.directive("hello", {
            // 只调用一次，指令第一次绑定到元素时调用
            bind: function () {
                console.log("触发bind钩子函数！");
            },
            // 被绑定元素插入父节点时调用
            inserted: function (el) {
                console.log("触发inserted钩子函数！");
            },
            // 所在组件的`vnode`更新时调用，但是可能发生在其子元素的`vnode`更新之前
            update: function (el) {
                console.log("触发update钩子函数！");
            },
            // 所在组件的`vnode`及其子元素的`vnode`全部更新时调用
            componentupdated: function (el) {
                console.log("触发componentupdated钩子函数！");
            },
            // 只调用一次，指令与元素解绑时调用
            unbind: function (el) {
                console.log("触发unbind钩子函数！");
            }
        });
        //// 3. 注入组件
        vue.mixin({
            methods: {
                update() {
                    this.message = "hi! 大漠";
                },
                uninstall() {
                    this.message = "";
                },
                install() {
                    this.message = "hello！w3cplus";
                }
            }
        });

        vue.prototype.$message = "我是一只小小鸟....";
        vue.prototype.showmessage = value => {
            console.log(value);
        };
    }
};

例子：https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/code/vue/sample/10插件.html

路由(vue-router)

vue-router也是一个插件。

vue router 是 vue.js 官方的路由管理器。它和 vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 css class 的链接
html5 历史模式或 hash 模式，在 ie9 中自动降级
自定义的滚动条行为

安装，跟上面的一样，可以直接引用<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>，可以使用npm来安装使用。

例子：https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/code/vue/sample/12路由系统.html

定义路由
要使用路由，就必须定义一个路由以及一个路由出口，也就是显示的内容的容器。

//  定义路由
const routes = [
    { path: '/foo', component: foo },
    { path: '/bar', component: bar }
]
//创建 router 实例，然后传 `routes` 配置
const router = new vuerouter({
    routes // (缩写) 相当于 routes: routes
})
// 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new vue({
    router
}).$mount('#app')

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

跳转
```
 <router-link to="/foo">go to foo</router-link>
```
这样的语句就可以跳转/foo了，然后会根据配置好的路由，跳转相对用地址。在路由出口显示你的/foo所关联的组件形成的内容。如果需要内部调用的话，可以使用router.push('/foo')
跳转+参数
```
  <router-link :to="{path:'/bar',params:{message:'params传值'},query:{message:'query传值'}}">go to bar</router-link>
```
这样的语句就可以跳转/bar了，并且传递携带的参数。然后会根据配置好的路由，跳转相对用地址。在路由出口显示你的/bar所关联的组件形成的内容。如果需要内部调用的话，可以使用router.push({ path: 'register', query: { message:'query传值' }})

注意：如果提供了 path，params 会被忽略，也就是params不会传递过去的

那么怎么获取传递过去的参数呢?
```
vm.$route.query.message;
vm.$route.params.message;
```
像这样就可以获取到路由的数据了，vm代表的是vue实例本身。

状态管理模式(vuex)

vuex也是一个插件。

vuex是一个专门为vue.js应用程序开发的状态管理模式,它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

vuex简单来讲，就是一个或多个组件可以共享一个对象。对象更新，相对应的组件也更新，这样就可以解决同级组件的交互问题。

安装：同样道理，跟上面一样，可以直接引用<script src="https://unpkg.com/vuex"></script>，也可npm安装。

例子：https://xhl592576605.github.io/markdown/零基础搭建前后端分离项目/code/vue/sample/13状态管理模式vuex.html

const store = new vuex.store({
            state: {
                /**作为共享状态添加*/
                products: [
                    { name: '鼠标', price: 20 },
                    { name: '键盘', price: 40 },
                    { name: '耳机', price: 60 },
                    { name: '显示屏', price: 80 }
                ]
            },
            getters: {
                saleproducts: (state) => {
                    let saleproducts = state.products.map(product => {
                        return {
                            name: product.name,
                            price: product.price / 2
                        }
                    })
                    return saleproducts;
                }
            },
            mutations: { //添加mutations，方法只有同步，不能异步
                minusprice(state, payload) {
                    let newprice = state.products.foreach(product => {
                        product.price -= payload
                    })
                }
            },
            actions: { //添加actions context为store对象
                minuspriceasync(context, payload) {
                    settimeout(() => {
                        context.commit('minusprice', payload); //context提交
                    }, 2000)
                }
            }

            })

上面就定义了一个store(仓库)，仓库有state，getters，mutations，actions,我们一个个讲过去。

state
state就是vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.也就是说，他是公有的，是所有组件可以共享的。
getters
getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutations
mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数。
actions
actions 类似于 mutations，不同在于：

actions提交的是mutations而不是直接变更状态
actions中可以包含异步操作, mutations中绝对不允许出现异步
actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
我们可以使用settimeout来模拟异步操作，或者promise来进行异步。

在这篇文章，我们更深入去了解vue，通过vue官方自带的插件，学习了更多，插件我们可以根据需求自己开发，官方提供的路由，状态管理等插件，在开发也起到非常大的重用，
在接下来的最后一篇文章，我们会讲述vue-cli3.0来创建vue项目与vue项目的调试。

在最后感谢：

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

天猫店群操作，实操细节注意事项，纯干货！

天猫店群操作，实操细节注意事项，纯干货！大家好，我是电商火火，团队自运营两百家天猫店。做店群的基本上都知道淘宝京... [阅读全文]
OpenGL入门详解(3.OpenGL基本流程)

看了不少的OpenGL书或者文章，有如下特征上来就是一堆代码，看的莫名其妙；上来就是很片面的介绍概念，看了也不知... [阅读全文]
甜品消消乐 02 甜品的类型枚举、结构体、字典的创建

甜品的类型枚举，结构体，字典的创建（1）枚举类型。// 甜品对象的种类把道具相关用枚举的方式写出来 pub... [阅读全文]
js中全选和全不选

<!DOCTYPE html><html lang="en"><head> ... [阅读全文]
使用无序列表ul实现多级菜单

首先要求后端传来的菜单数据必须包含：id---菜单idpid---父菜单id整体思想：首先渲染出整个菜单（不包含... [阅读全文]
Unity本地Json文件的创建、编辑和读取

文章目录（一）建本地Json文件（二）读取（三）注意（一）建本地Json文件Unity不能创建Json文件，导入... [阅读全文]
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git

2020-07-21 题目来源：http://www.h-camel.com/[html] ... [阅读全文]
html+css+js适合前端小白的实战全解（超详细）——2048小游戏（二）

续上一小节，我们可以发现每一个grid-cell上的数字初始时并不在格子里。这些数字可以随着玩家的操作而移动我... [阅读全文]
JavaScript：从0到1编写贪吃蛇

游戏截图1.画出游戏界面var c=document.getElementById("myCanvas"); ... [阅读全文]
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件

首先使用yarn或npm安装@angular-builders/custom-webpack，然后安装postc... [阅读全文]

网友评论


验证码：