vuex中store的用法

假如我想创建一个文件,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;

      }

      
    }
    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容