快捷導(dǎo)航

Vue項(xiàng)目中如何運(yùn)用vuex的實(shí)戰(zhàn)記錄

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

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

Vuex 是什么？

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

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

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

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

vuex使用周期圖

我的store目錄

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

實(shí)現(xiàn)一個(gè)vuex的示例

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

action-types.js

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

mutation-types.js

// 設(shè)置用戶信息
export const SET_USER_INFO = 'SET_USER_INFO'

在modules下面創(chuàng)建一個(gè)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 = {
    // 當(dāng)前用戶信息
    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')
})