Question

我有一个在整个应用程序中使用的功能。我想将此功能导出到模块并导入需要的地方。

组件内部的功能：

navigate: debounce(function() {
  this.$router.push({
    path: '/cars',
    query: this.params
  })
}, 200)

如何将此功能导出到模块并在组件上使用？

Answer 1

您可以将该函数添加到mixin（https://vuejs.org/v2/guide/mixins.html）

funcs.js：

export default
{
  methods:
  {
    navigate()
    {
      debounce(() =>
      {
        this.$router.push({
          path: '/cars',
          query: this.params
        });
      }, 200);
    }
  }
}

component.vue：

import funcs from './funcs.js'

export default
{
  ...
  mixins: [funcs],
  ...
}

Answer 2

考虑到您提到此方法经常在您的应用程序中使用，您可以向Vue路由器实例添加新方法。

const router = new VueRouter({
  routes 
})


// Create and export a pass-through API so you can use it just like router.push
export const debouncedPush = debounce(router.push, 200);

// Add debouncedPush method on the router
router.debouncedPush = debouncedPush

const app = new Vue({
  router
}).$mount('#app')

然后，在您的组件代码中，您可以像使用它

this.$router.debouncedPush({path: '/cars', query: this.params})

或者，您可以仅导入以下方法：

import { debouncedPush } from './path/to/file'
debouncedPush({path: '/cars'})

Vuejs辅助路线

2 个答案: