面试题：Vuex中状态持久化与性能优化

实现Vuex状态持久化的方法

使用localStorage或sessionStorage
- 步骤：在Vuex的mutation中，每当状态发生变化时，将相关状态数据存储到localStorage或sessionStorage中。例如：

const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutations: {
    SET_USER_INFO(state, userInfo) {
      state.userInfo = userInfo;
      localStorage.setItem('userInfo', JSON.stringify(userInfo));
    }
  },
  actions: {
    // 异步操作等
  }
});
// 在Vue实例创建前，从localStorage中读取数据并设置到状态中
if (localStorage.getItem('userInfo')) {
  store.state.userInfo = JSON.parse(localStorage.getItem('userInfo'));
}

原理：localStorage和sessionStorage是浏览器提供的本地存储机制，localStorage数据会一直保留，除非手动清除；sessionStorage数据在页面会话结束（关闭标签页等）时会被清除。通过将Vuex状态数据存储在这里，在页面刷新或重新加载时，可以从存储中读取数据并恢复到Vuex状态中。

使用插件如vuex - persist
- 步骤：安装vuex - persist插件npm install vuex - persist。然后在Vuex store创建时使用该插件。

import Vuex from 'vuex';
import createPersistedState from 'vuex - persist';

const vuexLocal = createPersistedState({
  key: 'vuex - store',
  storage: window.localStorage
});

const store = new Vuex.Store({
  state: {
    // 状态定义
  },
  mutations: {
    // 状态变更方法
  },
  actions: {
    // 异步操作等
  },
  plugins: [vuexLocal]
});

原理：该插件内部通过监听Vuex的mutation事件，将状态数据存储到指定的存储介质（如localStorage），并在Vuex store初始化时从存储中读取数据设置到状态中。

优化Vuex性能的方法及原理

使用模块划分（Module）
- 方法：将Vuex的状态管理按照业务模块进行划分，每个模块有自己独立的state、mutation、action和getter。例如：

const moduleA = {
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 异步操作等
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
};

const store = new Vuex.Store({
  modules: {
    moduleA
  }
});

原理：随着项目规模扩大，将状态管理模块化可以使代码结构更清晰，每个模块专注于自身业务逻辑。同时，在状态变化时，Vuex只需要更新相关模块的状态，而不是整个状态树，减少了不必要的计算和重新渲染，提高了性能。

使用getter缓存
- 方法：定义getter时，Vuex会自动缓存其计算结果，只有当依赖的状态发生变化时，getter才会重新计算。例如：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vuex', done: true },
      { id: 2, text: 'Build a project', done: false }
    ]
  },
  getters: {
    completedTodos(state) {
      return state.todos.filter(todo => todo.done);
    }
  }
});

原理：Vuex的getter基于Vue的计算属性原理，通过依赖追踪，当state.todos没有变化时，多次访问completedTodos会直接返回缓存的结果，避免了重复计算，提高了性能。

减少不必要的mutation触发
- 方法：在mutation中编写逻辑时，确保只有在状态真正需要改变时才触发mutation。例如，在处理对象状态时，先对比新老对象，只有在对象内容发生变化时才调用mutation更新状态。

const store = new Vuex.Store({
  state: {
    user: { name: 'John', age: 30 }
  },
  mutations: {
    UPDATE_USER(state, newUser) {
      if (JSON.stringify(state.user)!== JSON.stringify(newUser)) {
        state.user = newUser;
      }
    }
  }
});

原理：每次mutation触发都会引起Vuex状态树的更新和相关组件的重新渲染。通过减少不必要的mutation触发，可以避免不必要的重新渲染，从而提高性能。

使用严格模式（开发环境）
- 方法：在Vuex store创建时开启严格模式const store = new Vuex.Store({ strict: true });。在严格模式下，Vuex会检测状态变更是否是通过mutation进行的，如果不是则抛出错误。
- 原理：严格模式主要用于开发环境，通过确保所有状态变更都通过mutation进行，可以更容易追踪状态变化，及时发现错误的状态变更操作，提高代码的可维护性和稳定性，间接优化性能，因为错误的状态变更可能导致不必要的性能开销。

星途面试题库

面试题：Vuex中状态持久化与性能优化

知识考点

面试题答案

实现Vuex状态持久化的方法

优化Vuex性能的方法及原理