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

在 Vue.js 中，通常我们会把数据管理的工作交给 Vuex (Vue 的状态管理模式)。如果你想在 Store 中封装一个网络请求的函数，例如获取数据，你可以这样做：

首先，安装 Vuex 和 Axios（用于处理 HTTP 请求）：

npm install vuex axios

然后，在 `store/index.js` 或者单独的模块文件中创建一个 action 和 mutation，例如 `fetchData.js`：

// store/fetchData.js
import { mapActions } from 'vuex'

export const fetchData = ({ commit }, payload) => {
  return axios.get('your-api-url', { params: payload }).then(response => {
    commit('SET_DATA', response.data)
  }).catch(error => {
    commit('ERROR_OCCURRED', error)
  })
}

// 这里假设你在 mutations 文件中已经有 SET_DATA 和 ERROR_OCCURRED 的处理
const actions = {
  fetchData: mapActions(['fetchData'])
}

export default { actions }

接着，在 `store/main.js` 或 `store/store.js` 中导入并注册这个模块：

import createStore from './createStore'
import fetchData from './fetchData'

const store = createStore({
  // 其他配置...

  modules: {
    // 如果有其他模块，添加到这里
    dataFetch: { ... },
  },

  // 封装你的 fetchData 动作到 store 中
  actions: {
    ...store.actions,
    fetchData,
  },
})

export default store

现在你可以在任何一个组件中通过注入 store 来调用这个请求接口：

<template>
  <button @click="fetchData()">获取数据</button>
  <!-- 数据显示部分 -->
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['fetchData']),
    
    fetchData() {
      this.$store.dispatch('fetchData', { params: { key: 'value' } }) // 使用你需要的参数
    },
  },
}
</script>

这样，当你点击按钮时，就会触发 Store 中的 `fetchData` 函数，并在成功或失败后更新状态。