vue中vuex擷取公用資料

一 通過背景接口擷取資料

一：在vue架構中src下的api檔案夾裡

import req from "@/request.js";
const cig = req.getContext().cig;
export default {
    //擷取歸集方式清單資訊
    getDeliveryMthods(cb) {
        req
            .get(cig + "/sys/dataDict/v1/getByTypeKey?typeKey=deliveryMthods")
            .then(response => {
                cb(response);
            });
    }
    }
           

二 在vue架構中src下的store檔案夾裡設定vuex的内容

import selects from "@/api/selectContents.js";
import {Message} from "element-ui";

const state = {
    deliveryMthods: [],// 歸集方式
};

const getters = {};

const actions = {
    //擷取歸集方式清單資訊
    getDeliveryMthods({commit, state}) {
        selects.getDeliveryMthods(response => {
            let data = [];
            let obj = {label: '', value: ''}
            for (let i = 0; i < response.data.length; i++) {
                obj.label = response.data[i].text;
                obj.value = response.data[i].key;
                data.push(JSON.parse(JSON.stringify(obj)))
            }
            commit("setDeliveryMthods", data); //歸集方式清單資訊
        });
    }
};

const mutations = {
    setDeliveryMthods(state, deliveryMthods) {
        state.deliveryMthods = deliveryMthods;
    }
};

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

           

三 在vue元件裡可以直接使用

<el-form-item label="歸集方式：" prop="deliveryMethos">
                        <el-select
                          placeholder="請選擇"
                          v-model="cigResCatalogInfo.deliveryMethos"
                        >
                          <el-option
                            v-for="(item,index) in deliveryMthods"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                          ></el-option>
                        </el-select>
                      </el-form-item>

<script>
  import req from "@/request.js";
  import MixSearch from "@/mixins/mix-search.js";
  import {mapState, mapActions} from "vuex";
  const cig = req.getContext().cig;
  let mixSearch = MixSearch();
  export default {
    name: "catalogRegister",
    computed: mapState({
      deliveryMthods: state => state.selectContents.deliveryMthods, //歸集方式
    }),
</script>