Vue中的插件小练习

谁践踏了优雅 2022-05-19 06:14 134阅读 0赞

提到vue插件，想必大家一下想到就是官方推荐的vue-router、vue等，功能还是蛮强大的，那，我们一直在使用插件，那是否也可以开发一个自己的插件呢？

开发插件：

插件通常会为vue添加全局功能，vue.js的插件应当有一个公开方法。这个方法第一个参数是Vue构造器，第二个参数是一个可选的参数对象，下面就通过一个简单的小例子介绍一下插件的开发和使用

插件作用：用来获取或设置localStorage的存储（建议把插件单独放在一个js文件中，然后再引入到我们的入口文件中，而不是直接写在我们的入口文件中，这样方便在其他地方使用，甚至可以上传到GitHub上供别人使用哦）

let local = {
      save (key, value) {
        localStorage.setItem(key, JSON.stringify(value))
      },
      fetch (key) {
        return JSON.parse(localStorage.getItem(key)) || {}
      }
    }
    
    export default {
      install: function (vm) {
        vm.prototype.$local = local
      }
    }

插件使用：通过全局方法 Vue.use() 使用插件

像vue-router一样，在入口文件中引入我们的js文件，然后通过Vue.use()使用插件，看下面的小示例（我的js文件名为utils）

import Utile from './lib/utils'
    Vue.use(Utile)

然后我们就可以在vue中通过this.$local获取或设置localStorage的存储喽，看在全局前置钩子函数中使用的小示例

设置值：

this.$local.save("csdn", {
                login: true,
                userName: userName
            })

获取值：

//判断点击导航的时候，是直接进入导航还是进入登录界面
    router.beforeEach((to,from,next)=>{
      if(to.matched.some((item)=>item.meta.login)){//是否有需要登录的
        //router.app就是我们的根实例vm
        let info = router.app.$local.fetch('csdn')
        
    
        if(info.login){//判断是否已经登录
          next()
        }else{
          router.push({
            path:'/login'
          })
        }
      }else{
        next()
      }
    })

ok，这个例子很小哈，如果您还想要了解更多，请点击：[https://blog.csdn.net/lhjuejiang/article/details/81132161][https_blog.csdn.net_lhjuejiang_article_details_81132161]，里面有很多优秀的插件哦

[https_blog.csdn.net_lhjuejiang_article_details_81132161]: https://blog.csdn.net/lhjuejiang/article/details/81132161