Vue項目中怎么運用vuex

這篇文章主要為大家展示了“Vue項目中怎么運用vuex”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue項目中怎么運用vuex”這篇文章吧。

Vuex 是什么？

TIP ? 官網解釋：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

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

• 用戶的個人信息管理模塊；

• 從訂單結算頁，進入選擇優惠券的頁面，選擇優惠券的頁面。如何保存選擇的優惠券信息？state保存優惠券信息，選擇優惠券時，mutations提交，在訂單結算頁，獲取選擇的優惠券，并更新訂單優惠信息；

• 購物車模塊，每次都調用獲取購物車數量的接口，效果是實現了,但是每一次的HTTP請求,都是對瀏覽器性能消耗。

• 我的訂單模塊，訂單列表也點擊取消訂單，然后更新對應的訂單列表，這種情況也是用Vuex，state儲存一個狀態，監聽這個狀態，變化時更新對應的列表；

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

vuex使用周期圖

我的store目錄

• modules是存放不同的模塊

• action-types.js 是為了方便管理，字符串的映射，規范化的管理方式

• mutation-types.js也是為了方便管理,試想一下，一大堆的功能模塊混合在一起，那是多糟糕。

• index.js

實現一個vuex的示例

讓我們創建這幾個文件

action-types.js

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

mutation-types.js

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

在modules下面創建一個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'

// 創建state
const state = {
    // 用戶信息
    userInfo: {},
}

// 異步獲取數據，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')
})

以上是“Vue項目中怎么運用vuex”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！