vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据

1. 创建一个 Vuex store，用来存储应用程序的状态和数据。

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    data: []
  },
  mutations: {
    setData (state, payload) {
      state.data = payload
    }
  },
  actions: {
    fetchData ({commit}) {
      axios.get('/api/data')
        .then(response => {
          commit('setData', response.data)
        })
        .catch(error => {
          console.log(error)
        })
    }
  },
  getters: {
    getData: state => {
      return state.data
    }
  }
})

export default store

2. 在组件中使用 Vuex store。

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

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'MyComponent',
  computed: {
    ...mapGetters(['getData']),
    data () {
      return this.getData
    }
  },
  created () {
    this.$store.dispatch('fetchData')
  }
}
</script>

在这个例子中，我们使用了 Vuex store 来存储从后台获取的数据，并使用了 axios 库来从后台获取数据。我们在 Vuex store 中定义了一个 action 来获取数据，然后在组件中使用 mapGetters 方法来获取数据。我们还在组件的 created 生命周期中调用了 Vuex store 的 action，以便在组件加载时获取数据。最后，我们使用 v-for 指令来渲染数据列表。