vuex为什么Actions方法中加载的数据，渲染时getter经常取不到？如何保证渲染前先拿到数据？

Question

Vuex：

export default {
    state: {
        enum_dict:{}
    },
    mutations: {
        getDicData(state,data){
            state.enum_dict[data.dicCodes] = data.res
        }
    },
    actions: {
        getDicData(context,dicCodes){//空则取后台数据
            for(let i=0;i<dicCodes.length;i++){
            if(context.state.enum_dict[dicCodes[i]]==undefined){
                    let param={enum_id:dicCodes[i]}
                    //调用axios查询数据
                    api.menu.getEnumValue(param).then((res) => {
                        context.commit('getDicData',{dicCodes:dicCodes[i],res:res.data});
                    })
                }
            }   
        }
    }
}

然后在vue页面中created中（或者在mounted中）调用actions：

created(){
        this.$store.dispatch('getDicData',["staff_level"])
    },

在computed中获取值：

computed: {
        staff_level () {
            return this.$store.getters.getEnum("staff_level")
        },

Vue文件中用的是element的el-table，column上配置了一个formatter:
其中会使用获取的值，但是经常取到的是undefined。

enumFormatter: function(row,column,cellValue,index){
            console.log(JSON.stringify(this.staff_level))
            。。。

也就是说，无法保证渲染前，数据总是能够被加载完成。请问vuex异步加载到底应该怎么办呢？

Answer 1

找到了一个例子，原来异步需要在回调里处理才能保证取到后再执行：
https://segmentfault.com/a/11...