vue清除缓存

// 在 Vue 项目中清除缓存的示例代码

// 1. 使用 vuex 模块化管理状态时，可以通过 mutation 清除缓存数据
// store.js
const store = new Vuex.Store({
  state: {
    cacheData: {}
  },
  mutations: {
    CLEAR_CACHE(state) {
      state.cacheData = {}; // 清除缓存数据
    }
  },
  actions: {
    clearCache({ commit }) {
      commit('CLEAR_CACHE');
    }
  }
});

// 2. 在组件中调用清除缓存的方法
// MyComponent.vue
export default {
  methods: {
    clearCache() {
      this.$store.dispatch('clearCache'); // 调用 Vuex 中的 action 来清除缓存
    }
  }
};

// 3. 如果是清除浏览器缓存（如 localStorage 或 sessionStorage），可以直接使用原生 API
// MyComponent.vue
export default {
  methods: {
    clearBrowserCache() {
      localStorage.clear(); // 清除 localStorage 中的所有数据
      sessionStorage.clear(); // 清除 sessionStorage 中的所有数据
    }
  }
};

解释说明：

1. Vuex 状态管理：通过 Vuex 的 mutation 和 action 来管理应用的状态，并提供一个清除缓存的功能。
2. 组件调用：在组件中通过 $store.dispatch 触发 Vuex 中定义的动作来清除缓存。
3. 浏览器缓存：直接使用浏览器提供的 localStorage 和 sessionStorage 的 clear() 方法来清除浏览器中的缓存数据。