前言：对于只是维护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
使用的时候有两种使用方法
- 通过先出触发actions然后触发mutations来改变state
- 直接触发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.即可
生活就是不断的积累 奥力给
