vuex进阶用法

之前写的vuex只是小场景项目使用，当你的项目大了管理就不方便
而且通用下拉框类的数据就可以方便管理，调取

modules里面的js我这边是根据功能分类的
将通用数据通过vuex存储，包括后台请求，自定义的

import Vue from 'vue'

const state = {
    commonEnums: {
        teachers: [], //老师
        curriculums: [], //课程
    },
    //性别select
    sexSelect: [
        { name: '男', id: '1' },
        { name: '女', id: '2' },
        { name: '未知', id: '3' }
    ],
    //学生来源select
    originSelect: [{ name: '网站', id: '1' }, { name: '后台录入', id: '2' }]
}

const mutations = {
    SET_COMMON_ENUMS(state, val) {
        state.commonEnums.teachers = val.teachers
        state.commonEnums.curriculums = val.curriculums
        state.hasEnums = true
    }
}

const actions = {
    getCommonEnums({ commit }) {
        Vue.prototype.$api.getCommonEnums().then(({ data }) => {
            let obj = {
                teachers: data.teachers || [],
                curriculums: data.curriculums || []
            }
            commit('SET_COMMON_ENUMS', obj)
        })
    }
}

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

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate' //防止浏览器刷新值重置的储存方式
import app from './modules/app'
import enums from './modules/enums'

Vue.use(Vuex)

export default new Vuex.Store({
    plugins: [createPersistedState({ storage: sessionStorage })],
    state: {},
    mutations: {},
    actions: {},
    modules: {
        app,
        enums
    }
})

enums.js 后台请求来的数据做存储后设置一个条件(hasMsg)是否需要请求接口,减少请求,当数据在前端修改新增后去更改hasMsg的值表示当前需要重新请求

import Vue from 'vue'
const state = {
    certificate: [], //证书下拉
    subjects: [], //科目下拉
    hasMsg: false
}

const mutations = {
    SET_MESSAGE(state, val) {
        state.sub_category = val.sub_category
        state.sub_type = val.sub_type
        state.orgList = val.orgList
        state.certificate = val.certificate
    },
    // 判断是否要请求接口
    SET_HAS_MSG(state, val) {
        state.hasMsg = val
    }
}

const actions = {
    // 是否需要请求
    setHasMsg({ commit }) {
        commit('SET_HAS_MSG', false)
    },
    // 请求后台
    getEnum({ commit, state }) {
        if (!state.hasMsg) {
            Vue.prototype.$api.getResultEnum().then(({ data }) => {
                let subjects= data.subjects|| []
                let certificate = data.certificate || []
                commit('SET_MESSAGE', {
                    subjects,
                    certificate
                })
                commit('SET_HAS_MSG', true)
            })
        }
    }
}

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

使用vuex

<template>
    <div class="exam_g">
        <el-select v-model="search.subjects"
          clearable
          placeholder="科目">
             <el-option
                 v-for="item in subjects"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
             </el-option>
        </el-select>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    computed: {
        ...mapState('enums', ['subjects', 'certificate'])
    },
    methods: {
        ...mapActions('enums', ['getEnum'])
    },
    created() {
        this.getEnum()
    }
}
</script>