Question

如果用户在localStorage中设置属性，我创建了一个Vue插件来激活console.logs。该插件是console.log（）的包装。如果用户输入“ localStorage.isLoggingData = true”，则该插件将测试该属性是否存在于本地存储中，并通过运行来测试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

您的<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> thead { border:2px solid red; } table { border-collapse: collapse; transform: translateY(2px); } </style> </head> <body> <table> <thead> <tr> <th>Col 1</th> <th>Col 2</th> <th>Col 3</th> </tr> </thead> <tbody> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> <tr><td>A1</td><td>A2</td><td>A3</td></tr> <tr><td>B1</td><td>B2</td><td>B3</td></tr> <tr><td>C1</td><td>C2</td><td>C3</td></tr> <tr><td>D1</td><td>D2</td><td>D3</td></tr> </tbody> </table> </body> </html>函数看起来像是来自init({ state, commit, dispatch })的函数。
您无法直接通过vuex操作访问vue方法。

您可以直接在vuex中导出logData函数，然后在vuex中将其导入：

index.js

index.js

main.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) { /* ... */ }
}

logData.js

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

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

如果您只想将方法作为vue插件使用，而不希望直接公开，则可以将vue实例传递给vuex操作以访问export function logData(dataToLog) { const isLoggingData = localStorage.getItem('isLoggingData'); if (isLoggingData) console.log(dataToLog); } export default { install: function (Vue) { Vue.prototype.$logData = logData; } }：

$logData

如何使用使用自定义Vue插件

1 个答案: