[JavaScript知识库]vue点击修改数据回显的方式

问题描述

①当用户点击修改，这里面的大量数据需要回显，并且此结构封装成了组件供其他页面使用
②里面的所属组织在后续组件里可修改，其他字段全部禁用，因此需要提供接口让其他组件在能修改所属组织并拿到其值。

解决方法

通过vuex，并在组件内监听vuex中数据

//在vuex中
import { get_info_list_applicants } from "@/network/applicants";
	//actions中
	//在申请人里点击修改
    getApplicantsInApplicant({ commit }, payload) {
        get_info_list_applicants(payload).then(res => {
            commit('GETAPPLICANTSINAPPLICANT',res.data)
        }) 
    },
   // mutations中deptId设置
   //在申请人里点击修改
    GETAPPLICANTSINAPPLICANT(state,payload) {
        state.applicants_data = payload
    },
    getDeptId(state, payload) {
        state.deptId = payload
    },
    
    
    
//组件内部
computed:{
   ...mapState({
   delay_data:state=>state.applicants.ready_info,
   delay_deptId:state=>state.applicants.deptId
}),
methods:{
	//当用户点击修改回显数据
	  //当用户点击修改
    UpdateHandle(data){
     //回显数据
      this.$store.dispatch('getApplicantsInApplicant',[data.row.id])
      this.$store.commit('title_is_add',false)//改变标题
      this.dialogVisible = true
    },
	//当组件内树形控件发生了修改
	deptListTreeCurrentChangeHandle(data) {
      this.applicantsForm.deptId = data.id;
      this.applicantsForm.deptName = data.name;
      this.$emit('newDept',{deptId:data.id,deptName:data.name})//更新最新的deptid name
      this.$refs.deptListTree.setCheckedNodes([]);
      this.$refs.deptListTree.setCheckedNodes([data]);
      this.$store.commit('getDeptId',data.id)//在这里去传值
      this.deptListVisible = false; //气泡弹框隐藏
    
    },
}
watch:{
    delay_data:{
      handler(data){     
        for(let key in data){
          Object.keys(this.delayReadyPartyNumForm).forEach(element=>{
            if(element == key){
              this.delayReadyPartyNumForm[element] = data[key]
            }
          })
        }
      }
    },
    delay_deptId:{
      handler(data){
        this.delayReadyPartyNumForm.deptId = data
      }
    }
}   

完成组件的封装和接口的提供。

优化

后续发现可以将vuex中的函数封装的更简便，通过高阶函数的方式，将函数传递进去，这样不用以后每个组件在取值的时候都需要重写相同作用的函数。

//在vuex的actions中
  async getApplicantsInApplicant({ commit }, payload) {
   		let {data} = paload()
   		commit('GETAPPLICANTSINAPPLICANT',data)
    },
//在mutations中 这里不需要做任何改变  
    GETAPPLICANTSINAPPLICANT(state,payload) {
        state.applicants_data = payload
    },
//在组件中
import { get_info_list_applicants } from "@/network/applicants";
this.$store.dispatch('getApplicantsInApplicant',this.getData)
methods:{
	getData(){
		return get_info_list_applicants(this.id)
	}
}    

这种方式只需要，在使用的地方传递一个函数getData即可。实现了代码的复用，不会因为请求不同而需要在vuex中再造一系列函数。