Simple persistence mixin creator for Vue

persist.js

function persist(instanceProperty, storageKey) {
  return {
    created() {
      const name = this.$options.name || 'Persistence'
      storageKey = storageKey || `__persist__${name}__${instanceProperty}`

      this.$watch(instanceProperty, {
        deep: true,
        handler(value) {
          localStorage.setItem(storageKey, JSON.stringify(value))
        },
      })

      try {
        this.$set(this, instanceProperty, JSON.parse(localStorage.getItem(storageKey)))
      } catch (err) {}
    },
  }
}

/*
Usage:

export default {
  template: `...`,
  data() {
    return { message: 'This message will persist between page loads!' }
  },
  mixins: [
    persist('message')
  ]
}
*/