如何使用自定义 Vue 插件

Question

如果用户在 localStorage 中设置属性，我创建了一个 Vue 插件来激活 console.logs。该插件是console.log() 的包装器。如果用户输入'localStorage.isLoggingData = true'，则插件将测试该属性是否存在于本地存储中，并使用run来测试logData函数

index.js

import logData from '../plugins/logData

  // I want to console.log this inital data coming into the app
  async init ({ state, commit, dispatch }) {
    try {
      const { data } = await messaging.send(ACTION.READY)
      logData(data)

main.js

import logData from '../plugins/logData

// Use logData to optionally view console.log statements
Vue.use(logData)

logData.js

export default {
  install: function (Vue) {
    Vue.prototype.$logData = function (dataToLog) {
      const isLoggingData = localStorage.getItem('isLoggingData')
      if (isLoggingData) {
        console.log(dataToLog)
      }
    }
  }
}

目前，当我们遇到应用程序错误时，我们会路由到错误页面，当我注释掉“logData(data)”时，我会被路由到应用程序中的正确页面。我没有创建插件或没有正确导入它吗？

更新

index.spec.js

import logData from '../plugins/logger'
import { createLocalVue, shallowMount } from '@vue/test-utils'
import App from '@src/App'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(logData)

const mocks = {
  _vm: {}
}
mocks._vm.$logData = logData

const wrapper = shallowMount(App, {
  mocks,
  localVue
})

我现在被告知要模拟 _vm。这是模拟它的正确方法吗？

Answer 1

您的init({ state, commit, dispatch }) 函数看起来像是来自vuex。
您不能直接从 vuex 操作访问 vue 方法。

您可以直接在index.js 中导出您的logData 函数并将其导入vuex：

index.js

import { logData } from '../plugins/logData';

// I want to console.log this inital data coming into the app
async init ({ state, commit, dispatch }) {
  try {
    const { data } = await messaging.send(ACTION.READY);
    logData(data);
    // ...
  } catch(e) { /* ... */ }
}

main.js

import logDataPlugin from '../plugins/logData';

// Use logData to optionally view console.log statements
Vue.use(logDataPlugin);

logData.js

export function logData(dataToLog) {
  const isLoggingData = localStorage.getItem('isLoggingData');
  if (isLoggingData)
    console.log(dataToLog);
}

export default {
  install: function (Vue) {
    Vue.prototype.$logData = logData;
  }
}

如果您只想将该方法作为 vue 插件而不直接公开，您可以将 vue 实例传递给您的 vuex 操作以访问 $logData：

// in your vuex actions:
const actions = {
  async init ({ state, commit, dispatch }, {vm}) {
    vm.$logData("Hello");
  }
};

// call action from vue component:
export default {
   mounted() {
     // pass reference to vue instance to vuex store
     this.init({vm: this});
   },
   methods: {
     ...mapActions(['init'])
   }
}