写一个 axios 异步请求数据并且渲染组件的方法

在Vue.js中，可以使用axios库来进行HTTP异步请求，并结合Vuex管理状态，确保数据的一致性。下面是一个简单的例子，展示如何在组件里发送GET请求获取数据并渲染：

首先，在`main.js`或其他适当位置安装axios和vue-resource（为了简化说明，这里假设你已经安装了）：

npm install axios vuex --save

然后，设置一个Vuex store来存储数据：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

const state = {
  users: [],
};

const mutations = {
  setUsers(state, users) {
    state.users = users;
  },
};

const actions = {
  fetchData({ commit }) {
    axios.get('https://api.example.com/users')
      .then(response => {
        commit('setUsers', response.data);
      })
      .catch(error => console.error('Error fetching users:', error));
  },
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
});

接着，在你的组件里导入store，并在created生命周期钩子里发起请求：

// components/UserList.vue
import Vue from 'vue';
import { mapActions } from 'vuex';

export default {
  name: 'UserList',
  created() {
    const { fetchData } = mapActions(['fetchData']); // 获取store里的action
    fetchData();
  },
  computed: {
    users() {
      return this.$store.state.users; // 访问store里的data
    },
  },
  template:`
    <ul>
      <li v-for="user in users">{{ user.name }}</li>
    </ul>
  `,
};

当请求成功，数据将被存储在store里，然后在模板中直接用于渲染。如果有错误，你可以选择处理错误或提供给用户反馈。