How to use vuex in Vue project

What is Vuex?

TIP 👉 Official website explanation: Vuex is a state management mode 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 can be used when multiple pages need to share data. for example:

• User's personal information management module;
• From the order checkout page, go to the coupon selection page and select the coupon page. How to save selected coupon information? The state stores the coupon information. When a coupon is selected, mutations are submitted. On the order settlement page, the selected coupon is obtained and the order discount information is updated.
• The shopping cart module calls the interface to obtain the number of shopping carts each time. The effect is achieved, but each HTTP request consumes browser performance.
• In my order module, the order list also clicks to cancel the order, and then updates the corresponding order list. In this case, Vuex is also used to store a state, monitor this state, and update the corresponding list when it changes;

The basic idea behind Vuex is borrowed from Flux and Redux. Unlike other modes, Vuex is a state management library designed specifically for Vue to utilize Vue.js's fine-grained data response mechanism for efficient state updates.

Vuex usage cycle diagram

My store directory

• Modules are used to store different modules
• action-types.js is for easy management, string mapping, and standardized management
• mutation-types.js is also for easy management. Just imagine how bad it would be if a bunch of functional modules were mixed together.
• index.js

Implementing a vuex example

Let's create these files

action-types.js

// Get user information export const QUERY_USER_INFO = "QUERY_USER_INFO"

mutation-types.js

// Set user information export const SET_USER_INFO = 'SET_USER_INFO'

Create a base.js file under modules

base.js

import { QUERY_USER_INFO } from '../action-types'
import { SET_USER_INFO, SET_CUR_MENU_ID } from '../mutation-types'
import api from '@/assets/js/api.js'

// Create state
const state = {
    // User information userInfo: {},
}

// Get data asynchronously, commit to mutations, mutations change state
const actions = {
    /* Get user information */
    [QUERY_USER_INFO] ({ commit }, params) {
        return api.get({
                url: '/system/getUser',
            }, params.vm).then(data => {
                commit(SET_USER_INFO, data)
                return data
        })

    }

}

const getters = {
    // Current user information userInfo: state => state.userInfo
}

// Get synchronously const mutations = {
    [SET_USER_INFO] (state, data) {
        state.userInfo = data
    }
}


export default {
    state,
    actions,
    getters,
    mutations
}

index.js

import Vue from "vue"
import Vuex from "vuex"
import base from "./modules/base.js"

Vue.use(Vuex);

export default new Vuex.Store({
    modules:
        base
    }
})

Header.vue

<span>{{$store.getters.userInfo.name}}</span>

main.js

import Vue from 'vue'
import store from './store'
import { QUERY_USER_INFO } from '@/store/action-types.js'

store.dispatch(QUERY_USER_INFO, {}).finally(() => {
    new Vue({
        router: router(store),
        store,
        render: h => h(App)
    }).$mount('#app')
})

Summarize

This is the end of this article about how to use vuex in Vue projects. For more relevant content about using vuex in Vue projects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!