Vue之阅读《Vue实战教程》总结-1很多时候，虽然我们有vue的强大插件vuex，可是页面刷新了呢？那么数据会全部丢失

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

封装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)
    }
}

.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" />

对插件的封装

很多时候我们用到了插件，为了降低代码的耦合性，我们可以将它进行简单的封装。这里拿书上有的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.swal 和 this.$swal 进行访问。
然后就可以在main.js进行引用插件
/ src / main.js

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

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

logout() {
    this.$swal({
        text: '你确定要退出吗？'，
        confirmButtonText: '退出'
    })
}

......

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

封装localStorage

.sync 修饰符

对插件的封装