Javascript 如何使用自定义Vue插件

我创建了一个Vue插件，用于在用户在localStorage中设置属性时激活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)

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 logData from '../plugins/logData

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

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

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

logData.js

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

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

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

当前，当出现应用程序错误时，我们将路由到错误页面，当我注释掉“logData（data）”时，我将路由到应用程序中的正确页面。我是否没有创建插件或正确导入插件

更新 索引规范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
})

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

您的

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)

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 logData from '../plugins/logData

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

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

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

logData.js

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

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'])
   }
}

---

我现在的主要问题是，为什么我们不能在Vuex actions中访问Vue方法（如果在原型上编写的话）？@KevinT

vue

和

vuex

是两个不同的库，您只能访问vue组件内部的

vue.prototype

上定义的方法。但是，您可以将当前的vue组件传递给

vuex

操作（我的上一个示例），然后在该实例上使用您在原型上定义的

$logData

方法。我的PR审阅者希望我在init操作中调用

this.\u vm.$logData（data）

。我有工作。现在，我不明白如何在我的测试中访问/调用

this.\u vm.$logData（）

。我还有其他的测试失败了，因为无法读取未定义的属性“\u vm”。似乎

无法访问此
。@KevinT。我强烈反对使用
this.\u vm
-属性名称前的下划线是一种惯例，表示该属性为私有成员
this.\u vm
在官方
vuex
文档中没有记录，因此您不应该依赖它作为调用vue组件的参考-这可能在将来的
vuex
版本中发生变化。我建议直接导出上面示例中所示的函数。这也将使测试更容易。@KevinT。如果仍然希望通过vue插件执行此操作，则可以将vue实例作为额外参数传递给vuex操作，或使用中所示的解决方法之一。您还可以查看将所有（或部分）vuex存储存储在
localStorage
中的存储库，这样您就不必直接处理它。