應用場景：在page1頁面查詢某個數(shù)據(jù)怖辆，page2頁可修改page1中的數(shù)據(jù)項。為了避免page1中的不必要刷新音诈，現(xiàn)采用vuex來在page2中控制page1是否需要刷新逞敷。
vuex的聲明文件
import queryInfoApi from 'xxxApi.js'
const store={? ?
????state:{? ? ? ? list:[],? ? },? ?
????mutations:{? ? ? ?
????????setInfo(state,payload){? ? ? ? ? ? state.list=payload? ? ? ?}?
?????},? ?
????action:{? ? ? ?
????????getInfo:async({commit,state},{...params})=>{? ? ? ? ? ?
????????????const {data}=await queryInfoApi({...params})? ? ? ? ? ?
????????????const results=data.result.results||[]? ? ? ? ? ?
????????????commit('setInfo',results)? ? ? ?
????????}? ? }
????}
export default store
在store的index.js文件中聲明模塊 并在main.js文件中引用
import Vue from "vue";
import Vuex from "vuex";
import info from 'store文件路徑'
Vue.use(Vuex)
const store=new Vuex.Store({? ? modules:{? ? ? ? info? ? }})
export default store;
在page1中
import { mapState, mapActions } from 'vuex';
在computed中聲明數(shù)據(jù)對象
computed:{? ? ...mapState({? ? ? ? datalist:(state)=>state.info.list? ? })}
在methods中，聲明方法...mapActions(['getInfo',])
在methods中定義方法
async getInfoList(){? ? await this.$store.dispatch('getInfo',{page:1,pageSize:10})}
(page:1,pageSize:10為查詢接口所需參數(shù))
數(shù)據(jù)初始化或在其他需要刷新的時候蚯涮，調用this.getInfoList()
在page2中
當你在修改某一項之后治专，想要觸發(fā)page1的數(shù)據(jù)修改在想觸發(fā)的時候，
this.$store.dispatch('getInfo',{page:1,pageSize:10})
(page:1,pageSize:10為查詢接口所需參數(shù))
