vue中字典的使用

 dicts: ['order_status','product_type'],

 <el-form-item label="订单状态" prop="orderStatus">
          <el-select v-model="form.orderStatus" clearable placeholder="请输入订单状态" :disabled="isDisable" style="width: 100%" >
            <el-option
              v-for="dict in dict.type.order_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

 <el-form-item label="是否正式报价单" prop="isFormal">
          <el-radio-group v-model="form.isFormal">
            <el-radio v-for="dict in  dict.type.yes_or_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>

 <el-table-column label="订单状态" align="center" prop="orderStatus" >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus"/>
        </template>
      </el-table-column>

// 文件路径 src/mixins/dict.jsimport { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {　　　　// 所有的字典项
      dictList: [
        'comm.yesOrNo',
        'comm.hasOrNot',
        'comm.gender',
      ]
    };
  },
  computed: {
    ...mapGetters('dict', ['GET_VIEWS_DICLIST'])
  },
  async created() {
    if (this.GET_VIEWS_DICLIST['comm.yesOrNo'] === undefined) {
      this.SET_VIEWS_DICLIST_ACTIONS({
        codes: this.dictList.join(',')
      });
    }
  },
  methods: {
    ...mapActions('dict', ['SET_VIEWS_DICLIST_ACTIONS']),　　 // 该方法根据字典值获取字典名称　　 // val 字典值，例如： 1　　 // list  该字典类型的所有字典项 　　 getLabelName(val, list) {
      const len = list?.length;
      for (let i = 0; i < len; i++) {
        if (list[i].code === String(val)) {
          return list[i].name;
        }
      }
      return '';
    },
  }
};

// 文件位置 src/store/modules/dict.js// 接口引入import { getViewsDict } from '@/api/base/common';
const getDefaultState = () => {
  return {
    dicList: {} // 业务字典
  };
};
const dict= {
  namespaced: true,
  state: getDefaultState(),
  getters: {
    GET_VIEWS_DICLIST: (state) => state.dicList
  },
  actions: {
    SET_VIEWS_DICLIST_ACTIONS({ commit }, codes) {
      return new Promise((resolve, reject) => {
        getViewsDict(codes)
          .then((res) => {
            const obj = {};
            res?.data?.forEach((item) => {
              obj[item.code] = item?.items?.map((val) => {
                return {
                  code: String(val.code),
                  name: val.name
                };
              });
            });
            commit('SET_VIEWS_DICLIST', obj);
            resolve(obj);
          })
          .catch(() => {
            reject();
          });
      });
    }
  },
  mutations: {
    SET_VIEWS_DICLIST: (state, data) => {
      state.dicList = Object.assign({}, state.dicList, data);
    }
  }
};
export default dict;

// 文件位置  src/api/base/common.jsimport request from '@/api/axios.interceptors';
const viewApi = process.env.VUE_APP_VIEWS_API;
// 获取业务字典
export function getViewsDict(params) {
  return request({
    url: `${viewApi}/dictionary`,
    method: 'get',
    params
  });
}

<strong><el-form-item class="form-item" label="户籍类型" prop="residentType">
    <el-select
      v-model="formData_base.residentType"
      placeholder="请选择"
      @change="changeResidentType"
    >
      <el-option
        v-for="item in GET_VIEWS_DICLIST['comm.registerType.resident']"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      ></el-option>
    </el-select>
</el-form-item></strong>