vue observable 仓库

创建一个文件夹 命名为observable.js 定义号store mutations actions

import Vue from 'vue';
export const store = Vue.observable({
    
    
  //不同tab页筛选选中数据集合
  fieldParams: {
    
    },
  params: {
    
    
    limit: 10,
    start: 1,
    column: undefined,
    asc: undefined,
    mchUserId: stores.get('mchInfo')?.mchUserId || undefined,
  },
  activeTab: undefined,
  //列表数据
  tableData: {
    
    
    totalCount: 0,
    list: [],
  },
});
export const mutations = {
    
    
  //设置不同tab页筛选项
  setFieldParams(tabActive, fieldCode, fieldChildCode) {
    
    
    if (!store.fieldParams[tabActive]) {
    
    
      Vue.set(store.fieldParams, tabActive, {
    
    });
    }
    Vue.set(store.fieldParams[tabActive], fieldCode, fieldChildCode);
  },
  clearSortParams() {
    
    
    store.params.asc = undefined;
    store.params.column = undefined;
  },
  setActiveTab(value) {
    
    
    store.activeTab = value;
  },
  //设置tab切换请求参数
  setParams(name, fieldCode) {
    
    
    switch (name) {
    
    
      case 'sortList':
        store.params.column = fieldCode.order ? fieldCode.prop : undefined;
        store.params.asc = fieldCode.order ? map[fieldCode?.order] : undefined;
        actions.getDataList();
        break;
      case 'Size':
        store.params.limit = fieldCode;
        actions.getDataList();
        break;
      case 'Current':
        if (fieldCode) {
    
    
          store.params.start = fieldCode;
        } else {
    
    
          store.params.start--;
        }
        actions.getDataList();
        break;
      default:
        break;
    }
  },
  //设置接收时间参数
  setFieldTimeParams(active, type, time) {
    
    
    if (!store.fieldParams[active]) {
    
    
      Vue.set(store.fieldParams, active, {
    
    });
    }
    store.fieldParams[active][type + 'TimeStart'] = time
      ? dayjs(time[0]).format('YYYY-MM-DD ') + '00:00:00'
      : undefined;
    store.fieldParams[active][type + 'TimeEnd'] = time
      ? dayjs(time[1]).format('YYYY-MM-DD ') + '23:59:59'
      : undefined;
    actions.getDataList(active);
  },
  clearFieldParams(tabActive) {
    
    
    store.fieldParams[tabActive] = {
    
    };
  },
};
export const actions = {
    
    
  async getDataList() {
    
    
    const {
    
     data, code, message } = await get_page({
    
    
      ...store.fieldParams[store.activeTab],
      ...store.params,
      switchType: store.activeTab,
    });
    if (code !== 200) return Vue.prototype.$message.warning(message);
    const {
    
     records, totalCount } = data;
    console.log(records, totalCount, 'list,totalCount');
    store.tableData.list = records || [];
    store.tableData.totalCount = Number(totalCount);
  },
};

其他页面调用时：
先引入import { store, mutations, actions } from './observable';

computed: {
    
    
    fieldParams() {
    
    
      return store.fieldParams[this.tabActive] || {
    
    };
    },
  },
mutations.setFieldTimeParams(this.tabActive, type, e);
actions.getDataList();