Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

vuejs
javascript
vuex
communitycreator

States in Vuex

Chibuike Nwachukwu

Vuex is the state management library for Vue.js.

Vuex makes use of a single object to manage its state. This object contains all our application-level states and serves as a single source of truth.

A look at a state in Vuex Store


const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, description: 'Buy Educative Course', done: true },
      { id: 2, description: 'Take a nap', done: false }
    ]
  }
})

It is simply an object that takes in values. We can use these values to store data that is to be accessed by our app.

How to access Vuex states in a component

To access our states in our components, we can use various approaches. Here we see how we can get access to our store using this.$store.

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

We would need to provide the store option to the root instance when initializing the Vue project. Calling this.$storewould give all child components access to the store.


const app = new Vue({
  el: '#app',
  store,
  components: { Dashboard }
})

How to use the mapState helper to access states in components

We can also make use of the mapState helper which allows us to get rid of the many $this.store in the computed property.

import { mapState } from 'vuex'

export default {
  computed: {

...mapState({
    
    count: state => state.count,
    loading: state => state.loading,
    isLoggedIn: state => state.isLoggedIn

  })
 }
}

RELATED TAGS

vuejs
javascript
vuex
communitycreator
RELATED COURSES

View all Courses

Keep Exploring