假如我想创建一个文件,order.js用来管理缓存,放在store文件夹下面
1)注册moudle
在store/index.js里面
//index.js
import Vue from 'vue';
import Vuex from 'vuex';
import OrderSystem from './order'; //商城订单 add 引入
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
order: OrderSystem//商城订单 add 引入
}
});
2)order.js编写方法
import Vue from 'vue';
import ApiConf from '@/config/api.conf';
const State = {
mallOrderExportExcel: {}, //注册变量
}
const MutAtions = {
mallOrderExportExcel(state, data) {
state.mallOrderExportExcel = data;
}
}
const Actions = {
mallOrderExportExcel({ commit }, params) {
return new Promise((resolve, reject) => {
const exl = { responseType: 'blob', headers: { download: '1' } };
Vue.$api.post({ getway: ApiConf.order.$getway, api: ApiConf.order.mallOrderExportExcel }, params, exl).then(response => {
//getway为网关地址,api为url子路径
commit('mallOrderExportExcel', response.data);//刷新缓存,调用了MutAtions的mallOrderExportExcel方法
resolve(response.data);
}).catch(reason => {
reject(reason);
});
});
}
}
const Getters = {
mallOrderExportExcel: state => state.mallOrderExportExcel
};
export default {
namespaced: true,
strict: true,
state: State,
getters: Getters,
mutations: MutAtions,
actions: Actions
};
3)组件中应用
computed: {
...mapGetters({
mallOrderExportExcel2: 'order/mallOrderExportExcel' //这里不是字符串的意思,是将order.js的mallOrderExportExcel赋值给mallOrderExportExcel2,这里是取缓存的值
})
},
//function
exportexc() {
if (this.$refs.search.handleDatePickerChange()) {
this.exportLoading = true;
const formSearch = this.$refs.search.formSearch;
const params = {
contain_mix_pay_model: Number(formSearch.contain_mix_pay_model),
start_date: date(formSearch.start_date),
end_date: date(formSearch.end_date),
is_down_load: 1
};
console.warn({ ...formSearch, ...params }, '参数');
let rdata0=this.mallOrderExportExcel;//数据缓存已更新
var url='order/mallOrderExportExcel';
var params={name:'jiangyingying',relation:'lover'};
this.$store.dispatch(url, params ).then(res => { //调用store/order.js下面的Actions:mallOrderExportExcel方法
if (res.code === '40004') {
this.$message.error(res.sub_msg);
}
});
let rdata=this.mallOrderExportExcel;//调用之后,数据缓存已更新
let _this = this;
const file = new BlobFile({
data: rdata,
filename: '订单列表',
mime: MIME['xls'],
endings: 'native'
});
file.download();
file.destory();
this.$message.success('导出成功');
this.exportLoading = false;
}
}