前言：對(duì)于只是維護(hù)vue項(xiàng)目的我接觸到了vuex，看完之后我對(duì)vuex的印象和redux的使用方法差不多，下面我們來(lái)說(shuō)一下關(guān)于vuex的具體使用

1.vuex文件定義（通常放在根目錄store文件夾modules文件夾下），文件內(nèi)部格式為

image.png

對(duì)上圖進(jìn)行解析：
state：用于存儲(chǔ)變量，外部使用vuex中的值時(shí)也是直接引用state即可
mutations：可以理解為拿到需要設(shè)置的值之后來(lái)更新?tīng)顟B(tài)管理器中的state的值
actions：可以理解為需要觸發(fā)的行為，外面使用vuex時(shí)首先經(jīng)過(guò)的是actions中對(duì)應(yīng)的行為，然后該行為會(huì)指向?qū)?yīng)的mutations來(lái)更新state中對(duì)應(yīng)變量的值

2.store下面新建index.js用于將所有的狀態(tài)文件引入然后通過(guò)vuex構(gòu)造函數(shù)拋出，供外部使用

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        app,
    }
})

export default store

使用的時(shí)候有兩種使用方法

1. 通過(guò)先出觸發(fā)actions然后觸發(fā)mutations來(lái)改變state
2. 直接觸發(fā)mutations來(lái)改變state

我們先來(lái)說(shuō)一下第一種使用方法

image.png

import store from '@/store'

更新state
store.dispatch('ToggleDevice', 'mobile')
第一個(gè)參數(shù)是對(duì)應(yīng)定義的store文件中actions里面的行為
第二個(gè)參數(shù)是需要更新的state的值

觸發(fā)actions對(duì)用的行為之后后接著觸發(fā)mutations里面的從而更新對(duì)應(yīng)state里面的值

第二種使用方法

image.png

this.$store.commit('contract/setBaseClauseGroupItemsInfo', res.data.clause_group_item_info)

第一個(gè)變量是使用的哪個(gè)store下的哪個(gè)mutations中的事件，第二個(gè)是你需要更新的state的值

無(wú)論哪種方式使用store中的state都是一樣的

引入
import { mapState } from 'vuex'

computed: {
 ...mapState('contract', {
            buildingId: state => state.buildingId,
            contractType: state => state.contractType,
            operationType: state => state.operationType,
            clauseGroupItemsInfo: state => state.clauseGroupItemsInfo,
            costItems: state => state.costItems,
            isRounding: state => state.isRounding,
            addChild: state => state.addChild
        }),
}

contract就是你需要引用的狀態(tài)管理器的命名，這里的contract注意const的變量最好和文件名保持一致，在頁(yè)面中需要使用的變量就羅列出來(lái)，比如這個(gè)地方的buildingId,contractType,operationType等等，頁(yè)面中使用直接this.即可

生活就是不斷的積累 奧力給