Jump Start with Vue 3/

...

/

States and Getters in Vuex

States and Getters in Vuex

Learn about states and getters in Vuex.

We'll cover the following...

State

The store’s state is where all the data we’re managing with Vuex lives. The term store refers to a central container for managing the state of our application. All the other functionality of the library revolves around accessing and updating this data.

The state itself is a single JavaScript object on which we create properties to hold any data that needs to be shared between different components in our application.

Press + to interact
export default new Vuex.Store({
state: {
    customerName: 'John Smith',
    shoppingCart: [
        {
            name: 'Jumbo Box of Teabags',
            quantity: 1,
            price: 350
        },
        {
            name: 'Packet of Fancy Biscuits',
            quantity: 1,
            price: 199
        },
    ]
},
});

State properties can contain any valid data type, such as booleans, arrays, or even other objects. We can access the state in components where we want to use it by creating computed properties.

In the above example, the component is accessing ...