如何在 helper function / mixin 中获取 Vue 模块

Question

我在开发中使用 Nuxt.js。

我使用cookie-universal-nuxt在服务器端和客户端获取 cookie

modules:[
  [.....] ,
  [.....] ,
  [.....] ,
  ['cookie-universal-nuxt', { alias: 'myCookie' }],
]

我有一个帮手 function

// helper.js
const func = {
  getSomthingFromCookie(check){
    return this.$myCookie.get('check') === check ? "something" : "else"
  }
}

export default func

// another functions

const mixin = {
  methods: {
 getSomthingFromCookie(check){
    return this.$myCookie.get('check') === check ? "something" : "else"
  }
}
}
Vue.mixin(mixin)
// use this.getSomthingFromCookie outside

然后在商店或某些页面中使用它

// Page.vue or store.js
<div>{{ helper.getSomthingFromCookie("test") }}</div>
..
..
..
..
..
import helper from '~/function/helper.js'


OR

const result = helper.getSomthingFromCookie("test")

但它返回：

Cannot read property 'get' of undefined

我认为这是因为helper.js无法访问 vue 实例，所以它无法获取this.$myCookie 。

我试图import Vue from 'vue'和console.log(Vue)导入 Vue 但是终端中的日志像

    { install: [Function] },
    { install: [Function] },
    { install: [Function] },
    { install: [Function] },
    { install: [Function] },
    { install: [Function] },
    { install: [Function] },
    { install: [Function] },

因此，我不确定是否可以在导入的Vue中获得$myCookie function 。

我知道我可以通过在外面获取getSomthingFromCookie.get('check')并将其传递回 function 来解决此问题，例如：

getSomthingFromCookie(check,cookie){
    return cookie === check ? "something" : "else"
  }

但这不是效率，需要更改很多代码。 有更好的解决方案或建议吗？

Answer 1

在您的helper.js文件中，您无权使用this绑定访问vue实例。 您必须显式导入 Vue。

// helper.js
import Vue from "vue";

const func = {
  getSomthingFromCookie(check){
    return Vue.$myCookie.get('check') === check ? "something" : "else"
  }
}

export default func