疑问:开发过程中,是否遇到请求数据在好多地方使用,我们是不是在每个地方都请求一次,对应这种情况是否有更好的解决方式呢?
1、创建自己的store
主要定义actions,判断自己所需要的数据是否已经得到,相信大家都能看懂啦!
import { qGet } from '../../plugin/axios';
const state = {
factoryList: []
};
const mutations = {
setFactoryList(s, list) {
s.factoryList = list;
}
};
const actions = {
async getFactoryList({ commit }) {
if (state.factoryList.length === 0) {
const res = await qGet({
url: '/qxzmApi/config/sys/factorys'
});
if (res.status === 200) {
commit('setFactoryList', res.data);
}
}
}
};
export default {
namespaced: true,
state,
mutations,
actions
};
2、在页面如何调用
借助辅助函数,在创建该组件时,去调用一次actions,最终通过计算属性得到factoryList
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState('config', ['factoryList'])
},
created() {
this.getFactoryList();
},
methods: {
...mapActions('config', ['getFactoryList']),
}
}