yinghe-lowcode/src/store/modules/lowcodeStore.js

基于vue、ant-design-vue,datagrid的低代码平台

/*
 * @Author: 九哥
 * @Date: 2022-01-09 10:26:14
 * @LastEditTime: 2022-02-26 21:21:50
 * @LastEditors: Please set LastEditors
 * @Description: 低代码状态管理器，用于存储临时中间数据状态，比如表单项数据
 * @FilePath: \lowcode-ui\packages\store\store.js
 */
const lowcodeStore = {
    // 1. state
    state:{
        //组件清单model和label
      widgetList:[],
      //表单数据
      formData:{},
      cssClassList:[],

    },
    // // 2. getters
    getters:{
        // 参数列表state指的是state数据
        getWidgetList(state){
            return state.widgetList;
        },
        getFormData(state){
            return state.formData;
        },
        getCssClassList(state){
            return state.cssClassList;
        }
    },
    // 3. actions
    actions:{
        // 设置组件信息
        // 参数列表：{commit, state}
        // state指的是state数据
        // commit调用mutations的方法 
        // data就是调用此方法时要传的参数
        setWidgetList({commit,state}, data){
            // 调用mutaions里面的方法
            
            commit('setWidgetData', data);
        },
         // 设置低代码表单值
        setFormData({commit,state}, data){
            commit('setFormData', data);
        },
        setCssClassList({commit,state}, data){
            commit('setCssClassList', data);
        }
    },
    // 4. mutations
    mutations:{
        // state指的是state的数据
        // data传递过来的数据
        setWidgetData(state, data){
            
            state.widgetList = data;//将传参设置给state的widgetList
        },
        setFormData(state, data){
            state.formData = data;
        },
        setCssClassList(state, data){
            state.cssClassList = data;
        },
    }
}
export default lowcodeStore;