例如:
第一步:注册仓库
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) },
关于不使用Vuex仓库发请求与接收数据(会出现声明周期的bug可能拿不到数据(不太懂))
于 2022-08-30 12:37:34 首次发布