Vue中的插件小练习

提到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，里面有很多优秀的插件哦

Vue中的插件小练习

猜你喜欢