Quickly master how to get started with Vuex state management in Vue3.0

Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the status of all components of an application and uses corresponding rules to ensure that the status changes in a predictable manner. Vuex is also integrated into Vue's official debugging tool devtools, providing advanced debugging features such as zero-configuration time-travel debugging, state snapshot import and export, etc.
If you are not planning to develop a large single-page application, using Vuex may be cumbersome and redundant. It's true - if your app is simple enough, you're probably better off not using Vuex. A simple store pattern is all you need. However, if you need to build a medium to large single-page application, you will most likely consider how to better manage state outside of the component, and Vuex will become a natural choice.

1. State

Since Vuex's state storage is responsive, the easiest way to read the state from the store instance is to return a state in a computed property:

import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      count: computed(() => store.state.count)
    }
  }
}

Getters

Vuex allows us to define "getters" in the store (which can be thought of as computed properties of the store). Just like computed properties, the return value of a getter is cached based on its dependencies and is only recomputed if the values ​​of its dependencies change.

import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    return {
      double: computed(() => store.getters.double)
    }
  }
}

Mutations

The only way to change the state in the Vuex store is to submit a mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler). This callback function is where we actually make the state change, and it receives the state as the first argument:

const store = createStore({
  state: {
    count: 1
  },
  mutations:
    increment(state) {
      state.count++
    }
  }
})

You cannot call a mutation handler directly. This option is more like event registration: "When a mutation of type increment is triggered, call this function." To invoke a mutation handler, you need to call the store.commit method with the corresponding type:

store.commit('increment')

Actions

Action is similar to mutation, except that:
Action submits a mutation, rather than directly changing the state.
Action can contain arbitrary asynchronous operations.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations:
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})

Action is triggered by store.dispatch method:

store.dispatch('increment')

Modules

By using a single state tree, all application states are centralized into one large object. When your application becomes very complex, the store object may become quite bloated.
To solve the above problems, Vuex allows us to split the store into modules. Each module has its own state, mutation, action, getter, and even nested submodules - split in the same way from top to bottom:

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}
const store = createStore({
  modules:
    a: moduleA,
    b: moduleB
  }
})

6. vuex-persistedstate

When you refresh the page and reload the project, vuex will reset and all states will return to the initial state. Using vuex-persistedstate can avoid this situation.

1. Installation

npm install --save vuex-persistedstate

2. Use

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
const store = new Vuex.Store({
  plugins: [createPersistedState()],
});

The above is the details of how to quickly get started with Vuex state management in Vue3.0. For more information about Vuex state management, please pay attention to other related articles on 123WORDPRESS.COM!