时间戳

首页 > 解决方案 > 如何在 vue 中定义一个全局方法？

vue.js - 如何在 vue 中定义一个全局方法？

问题描述

events By Filters 方法用作组件中 v-for 循环的计算属性：

getters: {
        eventsByFilters(state) {
            var events = state.events
            if (state.search === '' && state.selected) {
                switch (state.selected) {
                    case 'month':
                        return events.filter(item => this.isMonthEqualNow(item))
                    case 'week':
                        return events.filter(item => this.isMonthEqualNow(item) && this.isWeekEqualNow(item))
                    case 'day':
                        return events.filter(item => this.isMonthEqualNow(item) && this.isWeekEqualNow(item)
                            && this.isDayEqualNow(item))
                    default:
                        return events
                }
            } else {
                return events.filter(item => item.title.indexOf(state.search) !== -1)
            }
        },

我需要使用 isMonthEqual 和其他方法来确定它们是否属于某些日期。但我发现很难访问它们：

如果我在操作中定义它们，我将无法访问它们，因为 getter 中不存在上下文；

如果我也全局定义，则无法访问它们（在这种情况下这是未定义的，没有它，将引发方法未定义的错误）；

标签： vue.js

解决方案

我假设您使用 Vue CLI 创建了项目，因此使用了 webpack。您应该能够在单独的文件中定义这些方法，将它们导出，然后将它们导入到您的商店文件中。

/Helpers/GlobalFunctions.js

export function isMonthEqual(param1, param2) {
  // blah blah blah
}

store.js

// Top of the file
import { isMonthEqual } from '@/Helpers/GlobalFunctions.js'

// Store
const store = new Vuex.Store({
  getters: {
    myGetter: state => {
      // Use the function somewhere
      const isEqual = isMonthEqual(month1, month2)
      return isEqual
    }
  }
})

推荐阅读