vue2 在store里面封装一个请求信息的接口 ，然后在页面中调用的例子 代码，多种方法

在 Vue 2 中，Vuex 作为状态管理库，你可以创建一个 store 来封装网络请求。这里我会展示两种常见的做法：

**方法一：使用 mapActions 和 mapGetters**

首先，在 `actions.js` 文件里定义一个异步请求函数：

// actions.js
export const fetchData = ({ commit }, params) => {
  axios.get('your-api-url', { params })
    .then(response => {
      commit('setData', response.data);
    })
    .catch(error => {
      commit('setError', error.message);
    });
}

然后在 `mutations.js` 文件里处理数据更新：

// mutations.js
export const setData = (state, data) => {
  state.data = data;
};

export const setError = (state, message) => {
  state.error = message;
};

接着在 `store.js` 中导入并映射这些动作：

// store.js
import { createStore } from 'vuex';
import * as actions from './actions';

const store = createStore({
  state: {
    data: null,
    error: ''
  },
  actions,
  mutations: {
    // ...之前的 mutations
  }
});

export default store;

// 在 components 使用
import { mapActions, mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters(['data', 'error'])
  },
  methods: {
    fetchData() {
      this.$store.dispatch('fetchData', { key: 'value' }); // 调用 action 并传递参数
    }
  }
};

**方法二：直接在组件内使用 `async`/`await`**

如果不想依赖 Vuex，你也可以在每个需要的地方直接使用 async/await：

<template>
  <button @click="getData">获取数据</button>
  <div v-if="isLoading">
    加载中...
  </div>
  <div v-else-if="error">
    错误：{{ error }}
  </div>
  <div v-else>
    {{ data }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      error: '',
      data: null,
    };
  },
  methods: {
    async getData() {
      try {
        this.isLoading = true;
        const response = await axios.get('your-api-url', { params: { key: 'value' } });
        this.data = response.data;
      } catch (error) {
        this.error = error.message;
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

这两种方法都可以让你在 Vue 组件中统一管理和调用 API 请求，提高代码复用性和可维护性。