[Vuejs]-How to use VUEX GETTERS in script

by

3👍

✅

Define TotalEntity a new computed property instead of part of the component’s data, since it has to be reactive based on the value from the store:

data: () => ({
    dialog: false
}),       
computed:{
    ...mapGetters({
        PageTitle:  'GETTER_CURRENT_PAGE',
        headers:   'GETTER_HEADERS',
        Positions: 'GETTER_POSITIONS',
        items:'GETTER_ITEMS'
    }),
    TotalEntity() {
        return this.Positions[0];
    }
}

Update: to circumvent potential issues that this.Positions might be null or undefined, you can use the optional chaining operator ?.:

return this.Positions?.[0];

You can also use nullish coalescing operator to fallback to a default value:

return this.Positions?.[0] ?? YOUR_FALLBACK_VALUE;
👤Terry

Leave a comment