解决 Vuex Store 数据在页面刷新后丢失的方法

解决 Vuex Store 数据在页面刷新后丢失的方法

当我们使用 Vue.js 和 Vuex 进行状态管理时，一个常见的问题是页面刷新会导致 Vuex store 中的数据丢失。这是因为 Vuex store 的数据默认存储在内存中，页面刷新会重新加载整个应用。本文将详细介绍几种解决方法。

问题原因

Vuex 的设计初衷是为了管理应用的状态，它并不会在页面刷新后自动持久化数据。当页面刷新时，浏览器会重新加载整个页面，Vuex store 也会被重新初始化，因此之前存储在 Vuex 中的数据会丢失。

Vuex Persistedstate 插件

Vuex Persistedstate 可以将 Vuex store 中的状态持久化到客户端的存储中，比如 localStorage、sessionStorage 等。这样，在用户刷新页面或重新打开浏览器时，应用的状态依然可以被保留。

安装

你可以使用 npm 或 yarn 来安装 Vuex Persistedstate：

# 使用 npm
npm install vuex-persistedstate

# 使用 yarn
yarn add vuex-persistedstate

基本使用

安装完插件后，需要在 Vuex store 中引入并使用它。下面是一个基本的使用示例：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 定义状态
  },
  mutations: {
    // 定义突变
  },
  plugins: [
    createPersistedState()
  ]
});

export default store;

在上面的示例中，我们使用了 createPersistedState 函数，它会自动将 Vuex store 的状态保存到 localStorage 中。

配置选项

createPersistedState 函数接受一个配置对象，你可以根据需求自定义一些选项。下面是一些常用的配置项：

key

默认情况下，Vuex Persistedstate 会将状态存储在 localStorage 中的 vuex 键下。你可以通过 key 选项自定义这个键名：

createPersistedState({
  key: 'my-app-store'
})

paths

如果你只想持久化部分状态，可以使用 paths 选项来指定要持久化的状态路径：

createPersistedState({
  paths: ['moduleA.stateItem1', 'moduleB']
})

storage

storage 选项允许你指定使用哪种类型的存储，默认是 localStorage。你可以将其设置为 sessionStorage 或者自定义的存储对象：

createPersistedState({
  storage: window.sessionStorage
})

// 使用自定义存储对象
const customStorage = {
  getItem: (key) => { /* 获取项目 */ },
  setItem: (key, value) => { /* 设置项目 */ },
  removeItem: (key) => { /* 移除项目 */ }
};

createPersistedState({
  storage: customStorage
})

getState 和 setState

这两个选项允许你自定义获取和设置状态的逻辑：

createPersistedState({
  getState: (key, storage) => {
    // 自定义获取逻辑
  },
  setState: (key, state, storage) => {
    // 自定义设置逻辑
  }
})

reducer

reducer 选项允许你自定义状态的持久化逻辑，通过它你可以只持久化状态的一部分数据：

createPersistedState({
  reducer: (state) => {
    return {
      moduleA: state.moduleA,
      moduleB: {
        item1: state.moduleB.item1
      }
    }
  }
})

filter

filter 选项允许你指定哪些突变会触发状态的持久化：

createPersistedState({
  filter: (mutation) => {
    return mutation.type === 'SOME_MUTATION'
  }
})

完整示例

下面是一个包含多个配置项的完整示例：

// store.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    moduleA: {
      stateItem1: 'value1',
      stateItem2: 'value2'
    },
    moduleB: {
      item1: 'value3',
      item2: 'value4'
    }
  },
  mutations: {
    SOME_MUTATION(state, payload) {
      // 突变逻辑
    }
  },
  plugins: [
    createPersistedState({
      key: 'my-app-store',
      paths: ['moduleA.stateItem1', 'moduleB'],
      storage: window.sessionStorage,
      reducer: (state) => {
        return {
          moduleA: state.moduleA,
          moduleB: {
            item1: state.moduleB.item1
          }
        }
      },
      filter: (mutation) => {
        return mutation.type === 'SOME_MUTATION'
      }
    })
  ]
});

export default store;

简洁版

const localStorage = ["token","permissions"];
const sessionStorage = ['userInfo'];
export default new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    paths: sessionStorage
  }), createPersistedState({
    storage: window.localStorage,
    paths: localStorage
  })],
  getters,
  state,
  mutations
})

总结

Vuex Persistedstate 是一个强大且易于使用的插件，能够帮助我们在 Vue.js 应用中持久化 Vuex store 的状态。通过灵活的配置项，你可以根据需求定制状态的持久化方式，满足不同的业务场景。

---

手动持久化数据

保存数据

如果需要更精细地控制持久化过程，可以手动将 Vuex store 的数据保存到 localStorage 或 sessionStorage 中。在相关的 mutation 或 action 中实现数据保存逻辑。

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        user: JSON.parse(localStorage.getItem('user')) || null,
        token: localStorage.getItem('token') || null
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
            localStorage.setItem('user', JSON.stringify(user));
        },
        setToken(state, token) {
            state.token = token;
            localStorage.setItem('token', token);
        }
    },
    actions: {
        login({ commit }, { user, token }) {
            commit('setUser', user);
            commit('setToken', token);
        }
    }
});

export default store;

加载数据

在 Vuex store 初始化时，我们可以从 localStorage 或 sessionStorage 中加载数据。这样，当应用启动时，数据就会被恢复到 Vuex store 中。

使用 IndexedDB

安装 localForage

localForage 是一个库，它为我们提供了对 IndexedDB、WebSQL 和 localStorage 的简单一致的 API。我们可以使用它来简化 IndexedDB 的操作。

npm install localforage

配置和使用

在 Vuex store 中引入 localForage 并配置数据持久化。

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        user: null,
        token: null
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
            localforage.setItem('user', user);
        },
        setToken(state, token) {
            state.token = token;
            localforage.setItem('token', token);
        }
    },
    actions: {
        login({ commit }, { user, token }) {
            commit('setUser', user);
            commit('setToken', token);
        },
        loadUser({ commit }) {
            localforage.getItem('user').then(user => {
                if (user) {
                    commit('setUser', user);
                }
            });
            localforage.getItem('token').then(token => {
                if (token) {
                    commit('setToken', token);
                }
            });
        }
    }
});

// 应用启动时加载用户数据
store.dispatch('loadUser');

export default store;

工作原理

localForage 使用 IndexedDB 作为默认的存储机制。它提供了与 localStorage 类似的 API，但支持更大的数据存储和更复杂的数据结构。当应用启动时，我们可以从 IndexedDB 中加载数据并恢复到 Vuex store 中。

总结

通过以上方法，我们可以有效地解决 Vuex store 数据在页面刷新后丢失的问题。根据不同的需求和场景，选择合适的持久化方案。如果需要快速简便的解决方案，可以使用 vuex-persistedstate 插件；如果需要更大的存储空间和更复杂的数据结构，localForage 是一个不错的选择。