如何从组件创建Vue.prototype?

时间:2020-02-26 08:39:18

标签: vue.js nuxt.js

请帮助,如何从组件创建Vue.prototype

调用this。$ authen.check()响应this。$ store ...时未定义。

我如何将Vue全局附加到Vue.extend

谢谢。

Dialog.vue

<template>
</template> 

<script>
export default {
  name: 'AuthenDialog',
  data: () => ({
    state: 0,
  }),

  methods: {
    check() {
      console.log(this.$store) // is undefined
    },
  }

  // when i use this it work!
  /*beforeCreate() {
    Vue.authen = Vue.prototype.$authen = this
  }*/
}
</script>

@ / plugins / AuthenDialog.js

import Vue from 'vue' 
import AuthenDialog from './Dialog'
AuthenDialog.install = (Vue, options) => {
    Vue.component(AuthenDialog.name, AuthenDialog)

    Vue.authen = Vue.prototype.$authen = new Vue.extend(AuthenDialog)
}

Vue.use(AuthenDialog)

1 个答案:

答案 0 :(得分:0)

尝试将数据属性定义为创建的钩子上的存储:

{
data: () => ({
    store: null,
  }),

methods: {
    check() {
      console.log(store)
    },
  },

created() {
    this.state = this.$store
  }
}

并像这样安装插件

AuthenDialog.install = (Vue, options) => {
   Object.defineProperty(Vue.prototype, '$authen', new Vue.extend(AuthenDialog))
}