全局调用vuex的写法及使用-----------下拉框数据的存储+使用

下拉框数据

1.allOptions.js

import api from '@/api/index'  // 引入接口文件
const state = {
  options: sessionStorage.getItem('options') != null ? JSON.parse(sessionStorage.getItem('options')) : {}
}

const mutations = {
  saveOptions: (state, data) => {
    state.options = data
    sessionStorage.setItem('options', JSON.stringify(data))
  }
}

const actions = {
  initOptions({ commit, state }) {
    return new Promise(resolve => {
      // console.log('state', state)
      const options = {}
      const codeParam1 = { codeTableID: 'CodeTable_GRJK_LX' }
      const codeParam2 = { codeTableID: 'CodeTable_GRJK_ZFFS' }
      // const codeParam3 = { codeTableID: 'CodeTable_GRJK_HBBM' }
      const codeParam4 = { codeTableID: 'CodeTable_GRJK_ZFDX_LB' }
      // 接口：公司/部门/费用承担部门-所有部门/项目编码/获取代码表-类型/获取代码表-支付方式/获取代码表-货币编码
      Promise.all([api.getGs(), api.orgName(), /* api.orgNameAll(), */ api.xmBm(), api.codeId(codeParam1), api.codeId(codeParam2), api.getHb() /* api.codeId(codeParam3) */, api.codeId(codeParam4)]).then(res => {
        // console.log('88888', res)
        options.gslx = res[0].data // 公司
        options.bm = res[1].data // 部门
        options.allbm = res[1].data // 费用承担部门-所有部门
        // options.allbm = res[2].data // 费用承担部门-所有部门
        options.xmbm = res[2].data // 项目编码
        options.lx = res[3].data // 获取代码表-类型
        options.zffs = res[4].data // 获取代码表-支付方式
        options.hbbm = res[5].data // 获取代码表-货币编码
        options.dxlb = res[6].data // 获取代码表-收款对象类别
        options.zt = { // 状态
          I: '初始',
          B: '申报',
          C: '处理',
          Y: '验证',
          Z: '总结'
        }
        // console.log('options', options)
        commit('saveOptions', options)
        resolve()
      })
      // console.log('这里有东西吗', options)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

2.将allOptions.js写入getters.js中

const getters = {
	options: state => state.allOptions.options
}

3.触发这个vuex生成数据

this.$store.dispatch('allOptions/initOptions')

4.使用vuex数据

this.$store.getters.options