使用 vuex 做全局缓存

store 

state:{
   dictionaryProductOptions: {
        refNum: 0,          //被组件引用次数
        loading: false,     //数据是否加载中
        options: []         //具体的选项列表
    }
},
mutation:{
  dictionaryProductOptions({dictionaryProductOptions}, {cmd, val}) {
        switch (cmd) {
            case "loading":
                dictionaryProductOptions.loading = val;
                return;
            case "options":
                dictionaryProductOptions.options = val;
                return;
            case "minusRef":
                dictionaryProductOptions.refNum = Math.max(0, dictionaryProductOptions.refNum - 1);
                return;
            case "plusRef":
                dictionaryProductOptions.refNum++;
                return;
            default:
                throw "dictionaryProductOptions 未知的命令" + cmd;
        }

    }

},
action:{
   loadDictionaryProductOptions({commit, state}, vue) {
        //如果没有被人引用，那么不加载数据
        if (state.dictionaryProductOptions.refNum <= 0) {
            return;
        }

        commit('dictionaryProductOptions', {cmd: "loading", val: true});

        vue.$ajax.get('dict/query_dict', {
                params: {
                    dictType: 'PRODUCT'
                }
            }
        ).then(res => {
            commit('dictionaryProductOptions', {cmd: "loading", val: false});
            if (res.code !== 'ok') {
                throw res.msg;
            }
            commit('dictionaryProductOptions', {cmd: "options", val: res.data});
        });

    }
}

 

vue:

<template>
    <el-select v-model="currentVal" :disabled="disabled" :loading="loading" :clearable="clearable" placeholder="请选择产品">
        <el-option
                v-for="item in options"
                :key="item.code"
                :label="item.name"
                :value="item.code">
            <span style="float: left">{{ item.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.code }}</span>
        </el-option>
    </el-select>
</template>

<script>
    import {mapState} from 'vuex';

 
    export default {
        name: 'DictionaryProductCodeSelect',
        beforeCreate() {
            this.$store.commit('dictionaryProductOptions', {cmd: "plusRef"});
            if (this.$store.state.dictionaryProductOptions.refNum <= 1) {
                this.$store.dispatch('loadDictionaryProductOptions', this);
            }
        },
        mounted() {
        },
        components: {},
        props: {
            clearable: {
                default: true
            },
            value: null,
            disabled: {
                default: false
            }
        },
        data() {
            return {
                currentVal: this.value,
            }
        },
        computed: {
            ...mapState({
                options: state => state.dictionaryProductOptions.options,
                loading: state => state.dictionaryProductOptions.loading,
                refNum: state => state.dictionaryProductOptions.refNum,
            })
        },
        methods: {},
        watch: {
            value(val, oldVal) {
                this.currentVal = val;
            },
            currentVal(val, oldVal) {
                this.$emit("input", val);
            }
        },
        filters: {},
        destroyed() {
            this.$store.commit('dictionaryProductOptions', {cmd: "minusRef"});
        }
    }
</script>

<style scoped>

</style>

 

 

 

 

 

 

转载于:https://my.oschina.net/u/2552286/blog/3090058