简简单单的Vue3(插件开发,路由系统,状态管理)

Posted xuhuale

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简简单单的Vue3(插件开发,路由系统,状态管理)相关的知识,希望对你有一定的参考价值。

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

系列:零基础搭建前后端分离项目

 

 

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

插件

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

  • 添加全局方法或者属性,如: vue-custom-element
  • 添加全局资源:指令/过滤器/过渡等,如 vue-touch
  • 通过全局 mixin 方法添加一些组件选项,如: vue-router
  • 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  • 一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router
  1. 使用插件
    使用全局方法Vue.use(myplus),就可以使用了,但在此事前要引用插件的js,直接引用或者npm i myplus进行安装,然后import myplus from Myplus

  2. 开发插件

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

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

    //  定义路由
    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>
    
  2. 跳转

     <router-link to="/foo">Go to Foo</router-link>
    

    这样的语句就可以跳转/foo了,然后会根据配置好的路由,跳转相对用地址。在路由出口显示你的/foo所关联的组件形成的内容。如果需要内部调用的话,可以使用router.push(‘/foo‘)

  3. 跳转+参数

      <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(仓库),仓库有stategettersmutationsactions,我们一个个讲过去。

  1. state
    state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.也就是说,他是公有的,是所有组件可以共享的。

  2. getters
    getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

  3. mutations
    mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数。

  4. actions
    actions 类似于 mutations,不同在于:

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

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

在最后感谢:https://www.jianshu.com/p/a804606ad8e9








以上是关于简简单单的Vue3(插件开发,路由系统,状态管理)的主要内容,如果未能解决你的问题,请参考以下文章

Vue3+elemetPlus支持动态路由和菜单管理UI框架

搞懂pinia状态管理

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vue3.0中如何快速上手Vuex状态管理

使用vite+vue3构建生产级项目架构

vue3动态路由及菜单