Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
1.state 当需要拿state里数据的时候
import {mapState} from 'vuex' // import vuex from 'vuex' // const mapState = vuex.mapState computed: { ...mapState({ formValidate: state => state.booking.order, dispatchList: state => state.dispatch.dispatchList }),2.Getters Store里创建方法
getters: { ordergetters: (state) => { return ‘orderID为：’ + state.order.orderId + ’ getters被调用了’ } }, Getters实际上就是state的computed …mapGetters([ ‘ordergetters’ ]),
然后像computed一样使用。 好处就是当一个store的state数据要在多个组件当中使用，就最好定义在getters里面，然后想上面一样使用就好了。 Computed默认情况下只有一个getter，没有setter 3 Mutations
porChange (porOption) { if (porOption) { // this.formValidate.seaInfo.por = porOption.pointCode this.$store.commit('porChanged', porOption.pointCode) } else { // this.formValidate.seaInfo.por = '' this.$store.commit('porChanged', ‘’) } }, Booking.js porChanged (state, params) { state.order.seaInfo.por = params },或
import {mapState, mapGetters, mapMutations} from 'vuex' ...mapMutations([ 'porChanged' ]), porChange (porOption) { if (porOption) { this.porChanged(porOption.pointCode) } else { this.porChanged() } },4 actions 如果是异步请求，就是需要从接口中获取值的话，然后去修改state的话，就需要使用actions。
askingSearch (pageNum) { this.$store.dispatch('rfqAsingGetList', { pageNum: pageNum || this.askingList.pageNum, param: this.param, success: (data) => { const ids = [] for (let i in data.list) { ids.push(data.list[i].askingId) } if (ids.length > 0) { this.$store.dispatch('rfqQuotationGetList', { askingIds: ids }) } } }) },然后actions里写请求的信息，
actions: { rfqAsingGetList (context, arg) { http.post(`/ms/ask/list.gou?pageNum=${isNaN(arg.pageNum) ? 1 : arg.pageNum}&pageSize=10`, arg.param).then(function (res) { // console.log(res) context.commit('_rfqAsingSetList', res.data.content) arg.success && arg.success(res.data.content) }) },通过commit去提交一个Mutations去修改store的值。
mutations: { _rfqAsingSetList (state, list) { state.list = list },5插件 https://segmentfault.com/a/1190000012184535?utm_source=tag-newest 状态持久化https://github.com/robinvdvleuten/vuex-persistedstate 同步标签页、窗口https://github.com/xanf/vuex-shared-mutations 语言本地化https://github.com/dkfbasel/vuex-i18n 管理多个加载状态https://github.com/f/vue-wait 缓存操作https://github.com/superwf/vuex-cache
当数据需要持久化存储的时候，也就是当刷新浏览器改变的数据不会被改变的时候，就使用插件。
import saveInlocal from './plugin/saveInLocal' 在我们的store注册的地方也就是index.js里面使用这个插件。 plugins: [saveInlocal], export default store => { if (localStorage.state) store.replace(JSON.parse(localStorage.state)) store.subscribe((mutations, state) => { localStorage.state = JSON.stringify(state) }) }6.v-model 我们在组件里想v-model state里的值的时候，不能使用直接赋值的形式。 而要使用get和set方法，使用get来获取state的值，，当要修改的时候，就使用set方法提交一个Mutations来改变那个值。
<CtnSetting v-model="containerList" :node="CtnNode.CONTAINER_NODE_PRE_BOOKING" :editCtnNo="false"></CtnSetting> computed: { containerList: { get: function () { return this.$store.state.booking.preBookingCtnList }, set: function (val) { this.$store.commit('initPreBookingCtn', val) } }, mutations: { initPreBookingCtn (state, list) { state.preBookingCtnList = list },