How to use VUEX GETTERS in script

Question

I'm using VUEX GETTERS for some variables. I can use them in the html part but I cannot edit or change them in the script->data part.

ERROR:[Vue warn]: Error in data(): "ReferenceError: Positions is not defined"

<script>
import {mapGetters} from 'vuex'
export default {
        data: () => ({
            dialog: false,
            TotalEntitiy:Positions[0] // GIVES ERROR
        }),       
        computed:{
            ...mapGetters({
                PageTitle:  'GETTER_CURRENT_PAGE',
                headers:   'GETTER_HEADERS',
                Positions: 'GETTER_POSITIONS',
                items:'GETTER_ITEMS'
            }),

Terry · Accepted Answer · 2021-08-03 07:38:36Z

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;

edited Aug 3, 2021 at 7:38

answered Aug 2, 2021 at 12:46

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

2 Comments

Viraj Singh Over a year ago

I think return this.Positions && return this.Positions[0] would be better as this.Positions can be undefined at some point

Terry Over a year ago

@VirajSingh Thanks: updated my answer to include handling of null or undefined values

Collectives™ on Stack Overflow

How to use VUEX GETTERS in script

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related