如何使用Vuex可重用地处理ajax错误？

// store/modules/error.js

const state = {
  error: null, // 存储错误信息的状态
};

const mutations = {
  setError(state, error) {
    state.error = error;
  },
  clearError(state) {
    state.error = null;
  },
};

const actions = {
  setError({ commit }, error) {
    commit('setError', error);
  },
  clearError({ commit }) {
    commit('clearError');
  },
};

export default {
  state,
  mutations,
  actions,
};

// store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import error from './modules/error';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    error,
  },
});

// components/Example.vue

<template>
  <div>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      // 发起ajax请求
      axios.get('/api/data')
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 触发错误并存储错误信息到error模块
          this.$store.dispatch('setError', error);
        });
    },
  },
};
</script>

// components/ErrorDisplay.vue

<template>
  <div v-if="error" class="error">
    {{ error.message }}
  </div>
</template>

<script>
export default {
  computed: {
    error() {
      return this.$store.state.error.error;
    },
  },
};
</script>