Vue仓库模式下，组件向Repository.js传递变量的最优方案

首先无需依赖Vuex就能解决重复代码和传参问题，先通过重构仓库实现复用，再讲Vuex的整合方式。

1. 重构通用仓库（无需Vuex） #

创建可配置的基础仓库，通过传入资源路径生成实例，避免重复编写逻辑一致的仓库文件。

新建 BaseRepository.js #

import Repository from "@/plugins/axios";

// 工厂函数生成仓库实例（简洁易维护）
export const createRepository = (resource) => {
  return {
    getList(params) {
      return Repository.get(`${resource}/`, { params });
    },
    // 可扩展其他通用方法，如post、put、delete等
  };
};

// 也可使用类的方式（适合复杂扩展场景）
// export default class BaseRepository {
//   constructor(resource) {
//     this.resource = resource;
//   }

//   getList(params) {
//     return Repository.get(`${this.resource}/`, { params });
//   }
// }

组件中使用（以index.vue为例） #

<template>
  <!-- 组件内容 -->
</template>

<script>
import { createRepository } from "@/api/BaseRepository";
// 若使用类则改为：import BaseRepository from "@/api/BaseRepository";

export default {
  data() {
    return {
      // 传入资源路径生成对应仓库实例
      firstRepo: createRepository("/first"),
      secondRepo: createRepository("/second"),
      // 类方式写法：firstRepo: new BaseRepository("/first")
    };
  },
  methods: {
    async loadFirstItems(params) {
      const { data } = await this.firstRepo.getList(params);
      // 处理第一组数据
    },
    async loadSecondItems(params) {
      const { data } = await this.secondRepo.getList(params);
      // 处理第二组数据
    }
  }
};
</script>

2. 结合Vuex实现状态管理 #

如果需要在多组件间共享请求数据、统一管理异步逻辑，可整合Vuex：

创建Vuex模块 itemsModule.js #

import { createRepository } from "@/api/BaseRepository";

const state = {
  firstItems: [],
  secondItems: []
};

const mutations = {
  SET_FIRST_ITEMS(state, items) {
    state.firstItems = items;
  },
  SET_SECOND_ITEMS(state, items) {
    state.secondItems = items;
  }
};

const actions = {
  async fetchFirstItems({ commit }, params) {
    const repo = createRepository("/first");
    const { data } = await repo.getList(params);
    commit("SET_FIRST_ITEMS", data);
  },
  async fetchSecondItems({ commit }, params) {
    const repo = createRepository("/second");
    const { data } = await repo.getList(params);
    commit("SET_SECOND_ITEMS", data);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

在Vuex Store中注册模块 #

假设Store入口文件为 store/index.js：

import Vue from "vue";
import Vuex from "vuex";
import itemsModule from "./itemsModule";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    items: itemsModule
  }
});

组件中调用Vuex Action并获取状态 #

<template>
  <div>
    <ul>
      <li v-for="item in firstItems" :key="item.id">{{ item.name }}</li>
    </ul>
    <ul>
      <li v-for="item in secondItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {
  computed: {
    // 映射Vuex状态到组件计算属性
    ...mapState("items", ["firstItems", "secondItems"])
  },
  methods: {
    // 映射Vuex Action到组件方法
    ...mapActions("items", ["fetchFirstItems", "fetchSecondItems"]),
    async loadAllItems() {
      await this.fetchFirstItems({ page: 1 });
      await this.fetchSecondItems({ page: 1 });
    }
  },
  mounted() {
    this.loadAllItems();
  }
};
</script>

内容的提问来源于stack exchange，提问作者Lynx