vuex持久化 vuex-persistedstate 用axios的json保存数据

你可以使用vuex-persistedstate插件来实现vuex的持久化。这个插件可以将vuex的状态保存到本地存储中，确保页面刷新后状态不会丢失。

首先，你需要安装vuex-persistedstate插件：

npm install vuex-persistedstate

然后，在你的Vue项目中的main.js文件中导入并使用该插件：

import createPersistedState from "vuex-persistedstate";
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

const store = new Vuex.Store({
  // ...你的其他配置

  plugins: [
    createPersistedState({
      // 配置项可以根据你的需求进行调整
      storage: window.localStorage, // 使用localStorage作为存储方式
      reducer(state) {
        // 你可以根据需要选择性地保存vuex中的某些状态
        return {
          yourStateKey: state.yourStateKey,
        };
      },
    }),
  ],
});

Vue.prototype.$axios = axios;

new Vue({
  // ...你的其他配置
  store,
}).$mount("#app");

现在，当你使用axios进行请求和响应时，你可以在vuex中保存数据。例如：

import axios from "axios";

// 在某个组件中
methods: {
  async fetchData() {
    try {
      const response = await this.$axios.get("https://example.com/data");
      this.$store.commit("setData", response.data);
    } catch (error) {
      console.error(error);
    }
  },
},

这样，当你调用`fetchData`方法时，通过axios获取到的数据会保存在vuex中，并且在页面刷新后仍然可用。