vue 多页面调用同一接口解决方法——Vuex

项目场景：

在实际开发中，经常会遇到多个页面调用同一个接口的场景。为了让代码更加简洁，我们可以使用Vuex来管理数据。下面展示一个调用接口获取字典的例子。

---

解决方案：

1. 在/store/modules/文件夹新建getDictionary.js文件

import dictionaryApi from '@/api/dictionaryApi' //获取字典
const dictionaryData = {
  state: {
    dicData: []
  },
  mutations: {
    setDictionaryData(state, data) {
      state.dicData = data;
    }
  },
  actions: {
    fetchDictionaryData({ commit },{ type,companyId }) {
      return dictionaryApi.getDictionary({
        companyId: companyId,
        type: type
      })
        .then(res => {
          if (res.data.code === 200) {
            commit('setDictionaryData', res.data.data?.[0]?.children || []);
          } else {
            this.$message.error(res.data.msg ? res.data.msg : '获取失败')
          }
        })
        .catch(error => {
          this.$message.error('获取失败')
        });
    }
  }
}
export default dictionaryData

2. 在/store/index.js文件中写入以下代码

import Vue from 'vue'
import Vuex from 'vuex'
import dictionaryData from './modules/getDictionary'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    dictionaryData
  },
})

3. 在组件页面中使用

<template>
  <el-select>
    <el-option v-for="item in dataList" :label="item.name" :value="item.id" :key="item.id" />
  </el-select>
</template>
<script>
export default {
  created () {
    this.$store.dispatch('fetchDictionaryData', { type: '参数1', companyId:'参数2' });
  },
computed: {
     dataList () {
      return this.$store.state.dictionaryData.dicData;
    }
}
</script>