Vue項目中如何運用vuex的實戰(zhàn)記錄

更新時間：2021年09月29日 09:59:15 作者：青蓮使者

如果說是JQuery是手工作坊,那么Vue.js就像是一座工廠,雖然Vue.js做的任何事情JQuery都可以做,但無論是代碼量還是流程規(guī)范性都是前者較優(yōu),下面這篇文章主要給大家介紹了關(guān)于Vue項目中如何運用vuex的相關(guān)資料,需要的朋友可以參考下

Vuex 是什么？

TIP 👉 官網(wǎng)解釋：Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。

當我們多個頁面需要共享數(shù)據(jù)時就可以使用Vuex。比如：

用戶的個人信息管理模塊；
從訂單結(jié)算頁，進入選擇優(yōu)惠券的頁面，選擇優(yōu)惠券的頁面。如何保存選擇的優(yōu)惠券信息？state保存優(yōu)惠券信息，選擇優(yōu)惠券時，mutations提交，在訂單結(jié)算頁，獲取選擇的優(yōu)惠券，并更新訂單優(yōu)惠信息；
購物車模塊，每次都調(diào)用獲取購物車數(shù)量的接口，效果是實現(xiàn)了,但是每一次的HTTP請求,都是對瀏覽器性能消耗。
我的訂單模塊，訂單列表也點擊取消訂單，然后更新對應的訂單列表，這種情況也是用Vuex，state儲存一個狀態(tài)，監(jiān)聽這個狀態(tài)，變化時更新對應的列表；

Vuex 背后的基本思想，借鑒了 Flux、Redux。與其他模式不同的是，Vuex 是專門為 Vue 設計的狀態(tài)管理庫，以利用 Vue.js 的細粒度數(shù)據(jù)響應機制來進行高效的狀態(tài)更新。

vuex使用周期圖

我的store目錄

modules是存放不同的模塊
action-types.js 是為了方便管理，字符串的映射，規(guī)范化的管理方式
mutation-types.js也是為了方便管理,試想一下，一大堆的功能模塊混合在一起，那是多糟糕。
index.js

實現(xiàn)一個vuex的示例

讓我們創(chuàng)建這幾個文件

action-types.js

// 獲取用戶信息
export const QUERY_USER_INFO = "QUERY_USER_INFO"

mutation-types.js

// 設置用戶信息
export const SET_USER_INFO = 'SET_USER_INFO'

在modules下面創(chuàng)建一個base.js文件

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'

// 創(chuàng)建state
const state = {
    // 用戶信息
    userInfo: {},
}

// 異步獲取數(shù)據(jù)，commit給mutations，mutations改變state
const actions = {
    /* 獲取用戶信息 */
    [QUERY_USER_INFO] ({ commit }, params) {
        return api.get({
                url: '/system/getUser',
            }, params.vm).then(data => {
                commit(SET_USER_INFO, data)
                return data
        })

    }

}

const getters = {
    // 當前用戶信息
    userInfo: state => state.userInfo
}

// 同步獲取
const mutations = {
    [SET_USER_INFO] (state, data) {
        state.userInfo = data
    }
}


export default {
    state,
    actions,
    getters,
    mutations
}

index.js

mport 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')
})