How do I define a global method in vue?

Question

The events By Filters method is used as a calculated property for the v-for loop in the component:

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)
            }
        },

I need to use the isMonthEqual and other methods to find out if they belong to certain dates.But I find it difficult to access them:

if I define them in actions, I can't access them, since context is not present in getter;

if I define globally, too, there is no way to access them(this is undefined in this case, and without this, the error that the method is undefined is thrown);

Are you using vuex?

Andres Foronda
– Andres Foronda

2020-07-15 21:58:58 +00:00
Commented Jul 15, 2020 at 21:58 — Andres Foronda
– Andres Foronda, Commented Jul 15, 2020 at 21:58
@AndresForonda, yeah

Марсель Абдуллин
– Марсель Абдуллин

2020-07-16 08:59:37 +00:00
Commented Jul 16, 2020 at 8:59 — Марсель Абдуллин
– Марсель Абдуллин, Commented Jul 16, 2020 at 8:59

Daniel Elkington · Accepted Answer · 2020-07-15 22:12:33Z

3

I'll assume you created your project using the Vue CLI, and are thus using webpack. You should be able to define these methods in a separate file, export them, and then import them into your store files.

/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
    }
  }
})

answered Jul 15, 2020 at 22:12

Daniel Elkington

3,9497 gold badges26 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I define a global method in vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related