关于不使用Vuex仓库发请求与接收数据(会出现声明周期的bug可能拿不到数据(不太懂))

例如:

第一步:注册仓库

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//引入小仓库
import fire from './fire'

//对外暴露Store类的一个实例
export default new Vuex.Store({
  //实现Vuex仓库模块式开发存储数据
  modules:{
    fire,
  }
})

第二部:先分发方法,当然你可以循环分发方法(这里我懒没有优化)

state里写属性到时候接收属性值进行存储

const state = {
  // 火灾数据
  fireList: [],
}

先actions

const actions = {
  async getFireList({commit}) {
    let result = await reqInfo36();
    // console.log(result);
    if (result.code == 1) { // console.log(result.data);
      commit("getFireLists", result.data);
    }
  },
}

再mutations

const mutations = {
  getFireLists(state, fireList) { // console.log(fireList);
    state.fireList = fireList;
    // console.log(state.fireList);
  },
}

再getters是为了可以直接...mapGetters解构

const getters = {
  fireList: state => state.fireList,
}

 

 但是我师傅说他从来不用这种方法,说麻烦又要考虑声明周期数据是否能及时反映的问题(我也不太清楚,小白一枚)

然后用了这种方法

  getreqInfo36() {
      reqInfo36().then((res) => {
        // console.log(res.data);
        this.$refs.Fire.getFire(res.data)
      })
    },

 然后传递用this.$refs.Fire.getFire(res.data)获取并使用子组件中的getFire()方法

给大家看一下我子组件里的方法

   getFire(val) {
      console.log(val)
      // this.infoFormData.caseNo = val.caseNo
      for (let i in this.infoFormData) {
        // console.log(i, this.infoFormData)
        this.infoFormData[i] = val[i]
      }
      console.log(this.infoFormData)
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值