阅读 133

Vue之阅读《Vue实战教程》总结-1

laravel-china社区看到了居然又出了新书,关于vue的。马上凑近一看,不错呀,这不是我一直喜欢的vue么... 毫不犹豫就入坑了。后面会总结感觉自己不太熟悉,或者是眼前一新的一些好的知识点。

  1. 封装localStorage

很多时候,虽然我们有vue的强大插件vuex,可是页面刷新了呢?那么数据会全部丢失,所以为了保证数据的不丢失,我们得另存一份数据到localStorage里。当然,localStorage存储方式是键值对的形式,key-value,并且value是字符串,所以我们将它以json格式储存就再好不过了。
/ src / utils / localStorage.js

const ls = localStorage
export default {
    setItem(name, value) {
        ls.setItem(name, JSON.stringify(value))
    },
    getItem(name) {
        try{
            return JSON.parse(ls.getItem(name))
        } catch (e) {
            return null
        }
    },
    removeItem() {
        ls.remove(name)
    }
}
复制代码
  1. .sync 修饰符

官方文档里说明的是:在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之。举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图

// 子组件
export default {
  name: 'Message',
  props: {
    // 是否显示消息框
    show: {
      type: Boolean,
      default: false
    },
    // 消息框的类型
    type: {
      type: String,
      default: 'success'
    },
    // 消息
    msg: {
      type: String,
      default: ''
    }
  },
  methods: {
      close() {
          this.$emit('update:show', false)
      }
  }
复制代码
// 父组件
<Message :show.sync="msgShow" :type="msgType" :msg="msg"></Message>
复制代码

这样就实现了可以在组件内部,通过$emit来关闭消息提示。 其中的

<Message :show.sync="msgShow"/>
复制代码

会被Vue扩展为

<Message :show="msgShow" @update:show="val => msgShow = val" />
复制代码
  1. 对插件的封装

很多时候我们用到了插件,为了降低代码的耦合性,我们可以将它进行简单的封装。 这里拿书上有的vue-sweetalert2做例子
/ src / plugins / vue-sweetalert2.js

// 引入js插件文件
import swal from 'sweetalert2'

export default {
    install: (Vue) => {
        // sweetalert2 的设置默认配置的方法
        swal.setDefault({
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: 'rgb(140,212,245)',
            cancelButtonColor: 'rgb(193,193,193)'
        })
        
        // 添加全局方法
        Vue.swal = swal
        // 添加实例方法
        Vue.prototype.$swal = swal
    }
}
复制代码

我们这里将sweetalert2封装成一个插件,Vue.js的插件有一个公开的方法 install ,这个方法的第一个参数是Vue的构造器。将swal添加成全局的方法和实例方法后,我们就能通过 Vue.swalthis.$swal 进行访问。
然后就可以在main.js进行引用插件
/ src / main.js

.
.
// 引入插件
import VueSweetalert2 from './plugins/vue-sweetalert2'
// 使用插件
Vue.use(VueSweetalert2)
.
.
.
复制代码

然后在对应的方法里就可以直接进行调用了。

logout() {
    this.$swal({
        text: '你确定要退出吗?',
        confirmButtonText: '退出'
    })
}
复制代码

......