Vuex

• https://vuex.vuejs.org/
• state management pattern + library for Vue.js applications

Install

textCopy
npm install vuex@next --save

Concept

• state: Shared data itself
• getters: Read gateway of state
• actions: Asynchronous changing data
• mutations: Synchronous changing data
• modules: Fractally Scaled out group of states

Simple Example

jsCopy
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)

jsCopy
store.commit('increment')
console.log(store.state.count) // -> 1

jsCopy
methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}