Vuex in Vue.js

  • What exactly is Vuex?

    Vuex is a state management paradigm and framework for Vue.js applications. It serves as a centralized repository for all of the components of an application.

  • Why would you want to use Vuex?

    Vuex is a state management system. To truly comprehend what Vuex works, you must first comprehend the concept of state in a SPA and how it interacts with other elements.

  • Installation – NPM

    npm install vuex@next --save
  •  The simplest example for Vuex

    => Initialize the store
    import { createApp } from 'vue'
    import { createStore } from 'vuex'
    
    // Create a new store instance.
    const store = createStore({
      state () {
        return {
          count: 0
        }
      },
      mutations: {
        increment (state) {
          state.count++
        }
      }
    })
    
    const app = createApp({ /* your root component */ })
    
    // Install the store instance as a plugin
    app.use(store)
     => Trigger a state change
    store.commit('increment')
    
    console.log(store.state.count)
     => Access store in Vue component
    methods: {
      increment() {
        this.$store.commit('increment')
        console.log(this.$store.state.count)
      }
    }

     

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories