直接用常数调用VUE混合蛋白

Question

我有一个带有三个链接的页脚组件。当用户单击链接时，除了将用户带到新页面之外，我还尝试使用mixin来跟踪点击事件。当我在Chrome DevTools中设置断点时，似乎该实现不起作用。我导入了常数文件和混音。

页脚，简短的一个链接

  <template>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col align-center">
          <a
            href="/"
            target="_blank"
            class="btn"
            name="item"
            @click="logButtonClick(ANALYTICS.ITEM)">{{ $t('footer.item') }}</a>
        </div>
      </div>
    </div>
  </footer>
</template>
<script>
import analytics from '@/mixins/analytics'
import { ANALYTICS } from "@/constants"
export default {
  name: 'PageFooter',
  mixins: [analytics]
}
</script>

混合

 methods: {
    logButtonClick (buttonType) { // breakpoint here, get nothing
      this.$analytics.track({
        identifier: `Consumer ${this.$options.name} - ${buttonType} Button`
      })
    }
  }

我想念什么吗？该实施是否有效，或者我应该有一种方法：

methods: {
selectLink(str) {
  if (str === item) {
    this.logButtonClick(ANALYTICS.ITEM)
    }
  }
}

Answer 1

我收到的原始错误是

'属性或方法ANALYTICS未在实例上定义，而是在渲染过程中引用。通过初始化该属性，请确保该属性在数据选项或基于类的组件中具有反应性。

和

'uck typeError：在点击事件中无法阅读undefined的属性ITEM ....＆quot'

本质上，这意味着我没有在PageFooter中定义分析(因为这是一个愚蠢的组件，我不想向其添加数据对象，我想严格保存它(或在VUE实例上添加它等级。由于分析是未定义的，因此项目会引发另一个错误，因为它不能是未定义的属性。

这是我的解决方案，我在添加的模板标签中使用了一个开关案例@click =＆quot; selectlink('asd'(＆quot

methods: {
    selectLink (str) {
      switch (true) {
        case str === 'asd':
          this.logButtonClick(ANALYTICS.ITEM)
          break
        case str === 'efg':
          this.logButtonClick(ANALYTICS.ITEM2)
          break
        case str === 'hij':
          this.logButtonClick(ANALYTICS.ITEM3)
          break
      }
    }
  }

和单元测试：

it('[positive] should track analytics if `asd` is passed to selectLink()', () => {
    const str = 'asd'
    const mockFn = jest.fn()
    jest.spyOn(wrapper.vm, 'logButtonClick')
    wrapper.find('a').trigger('click')
    mockFn(str)

expect(wrapper.vm.logButtonClick).toHaveBeenCalledWith(ANALYTICS.COOKIE_CONSENT)
      })

https://v2.vuejs.org/v2/guide/reactivity.html#declaring-reactive-properties

故事的寓意，高级工程师告诉您在代码审查中做一些时髦的事情。