目錄

• x 是什麼？
• vuex使用週期圖
• 我的store目錄
• 實現一個vuex的示例
• 總結

Vuex 是什麼？

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

當我們多個頁面需要共享資料時就可以使用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_INFwww.cppcns.comO } 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.http://www.cppcns.com
 
userInfo = data
    }
}


export default {
    state,actions,getters,www.cppcns.com
    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_USE客棧R_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的文章就介紹到這了,更多相關Vue專案運用vuex內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！