vue2.7 vuex 接口请求数据存储在仓库

在Vue2.7中，可以使用Vuex来进行接口请求数据的存储。首先需要安装vuex：

npm install vuex --save

然后在store文件夹下创建一个store.js文件，引入Vuex并创建一个store对象：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: null
  },
  mutations: {
    setData(state, payload) {
      state.data = payload
    }
  },
  actions: {
    fetchData(context) {
      // 发起接口请求
      axios.get('/api/data')
        .then(res => {
          context.commit('setData', res.data)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
})

export default store

在state中定义一个data属性用来存储接口返回的数据，在mutations中定义一个setData方法用来更新state中的data属性，在actions中定义一个fetchData方法用来发起接口请求，并在请求成功后调用mutations中的setData方法来更新state中的data属性。

在Vue组件中可以通过以下方式来访问store中的data数据：

<template>
  <div>
    <div v-if="data">{{ data }}</div>
    <div v-else>暂无数据</div>
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['data'])
  },
  methods: {
    ...mapActions(['fetchData'])
  },
  mounted() {
    this.fetchData()
  }
}
</script>

在computed中通过mapState来获取store中的data数据，在methods中通过mapActions来调用store中的fetchData方法来发起接口请求。在组件的mounted钩子函数中调用fetchData方法来在组件渲染时就获取数据。