浅谈vue使用vuex

前言：对于只是维护vue项目的我接触到了vuex，看完之后我对vuex的印象和redux的使用方法差不多，下面我们来说一下关于vuex的具体使用

1.vuex文件定义（通常放在根目录store文件夹modules文件夹下），文件内部格式为

image.png

对上图进行解析：
state：用于存储变量，外部使用vuex中的值时也是直接引用state即可
mutations：可以理解为拿到需要设置的值之后来更新状态管理器中的state的值
actions：可以理解为需要触发的行为，外面使用vuex时首先经过的是actions中对应的行为，然后该行为会指向对应的mutations来更新state中对应变量的值

2.store下面新建index.js用于将所有的状态文件引入然后通过vuex构造函数抛出，供外部使用

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

使用的时候有两种使用方法

1. 通过先出触发actions然后触发mutations来改变state
2. 直接触发mutations来改变state

我们先来说一下第一种使用方法

image.png

import store from '@/store'

更新state
store.dispatch('ToggleDevice', 'mobile')
第一个参数是对应定义的store文件中actions里面的行为
第二个参数是需要更新的state的值

触发actions对用的行为之后后接着触发mutations里面的从而更新对应state里面的值

第二种使用方法

image.png

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

第一个变量是使用的哪个store下的哪个mutations中的事件，第二个是你需要更新的state的值

无论哪种方式使用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就是你需要引用的状态管理器的命名，这里的contract注意const的变量最好和文件名保持一致，在页面中需要使用的变量就罗列出来，比如这个地方的buildingId,contractType,operationType等等，页面中使用直接this.即可

生活就是不断的积累 奥力给