Vue应用启动阶段初始化Vuex Store的最佳实践

1. 初始化操作的最优执行位置 #

结合你需要用初始化数据决定用户落地页的场景，按优先级排序可选位置如下，优先选靠前的方案：

• 最高优先级：Vuex Store实例定义阶段直接初始化
  就是在编写store入口文件（一般是src/store/index.js）的时候，在定义state初始值前就读取对应LocalStorage数据，直接作为state的初始值。这个时机是最早的，比Vue实例创建、路由初始化都要早，完全不会出现路由守卫、组件读取store时拿到空初始值的问题，从根源上避免落地页判断错误、页面重定向闪屏的问题。
  示例逻辑：

  // src/store/index.js
  import { createStore } from 'vuex'
  // 初始化阶段直接读LocalStorage，提前做好容错
  let userLandingConfig = null
  try {
    const cache = localStorage.getItem('user_landing_config')
    userLandingConfig = cache ? JSON.parse(cache) : null
  } catch (e) {
    localStorage.removeItem('user_landing_config')
  }
  
  export default createStore({
    state: {
      userLandingConfig
      // 其余state配置...
    },
    // mutations、actions等其余配置...
  })
  

• 次优先级：main.js中实例挂载前执行初始化
  如果你的初始化逻辑依赖其他全局插件（比如接口请求实例、埋点SDK等），没法在store定义阶段直接执行，就把初始化逻辑封装成Vuex action，在main.js里按「注册store → 执行初始化action → 等待初始化完成 → 注册路由 → 挂载Vue实例」的顺序执行。千万不要在注册路由之后才做初始化，不然路由前置守卫触发时store还没拿到正确值，落地页判断就会出错。
• 绝对不要选的位置：App.vue的生命周期钩子（created/onMounted）、路由组件内部的钩子
  这些钩子执行时路由已经完成了第一次解析跳转，哪怕后续判断出落地页不对再做重定向，也会出现先跳默认页再闪跳的问题，体验非常差。

2. 同步LocalStorage数据到Vuex的优势，直接读LocalStorage的效果差异 #

直接调用localStorage.getItem('key')确实能拿到值，但完全达不到Vuex托管状态的同等效果，尤其是你这个涉及路由判断、后续可能更新状态的业务场景，差异非常明显：

• 响应式能力差异
  LocalStorage本身不是响应式数据源，如果你在组件、路由守卫里直接读LocalStorage值，后续LocalStorage里的值更新了，所有用到这个值的地方不会自动同步，你得自己手动监听storage事件做更新，逻辑写起来非常零散。而存在Vuex中的状态是原生响应式的，只要状态更新，所有依赖这个状态的组件、计算属性、路由守卫都会自动触发更新，不需要额外写监听逻辑。
• 维护成本差异
  把需要全局使用的LocalStorage数据统一同步到Vuex，相当于做了一层全局数据源的收口：后续如果存储的key名变了、存储格式变了（比如从存字符串改成存JSON对象）、甚至要把存储介质从LocalStorage换成IndexedDB/接口拉取，你只需要修改store里的初始化和更新逻辑就行，业务层（路由判断、组件取值）的代码完全不用动。如果全项目零散写localStorage.getItem，改逻辑的时候要全项目搜引用，漏改一处就会出线上bug。
• 问题排查效率差异
  托管在Vuex里的状态可以通过Vue Devtools直接追踪所有修改记录：什么时候改的、改前改后的值是什么、触发修改的来源是哪个action/组件，排查跳转逻辑问题的时候效率极高。如果是直接读写LocalStorage，你根本没法追踪到底是哪段代码改了存储值，出了问题排查起来非常麻烦。
• 边界容错成本差异
  统一在store层做LocalStorage的读写，你可以集中做容错处理（比如JSON.parse的异常捕获、脏数据清洗、默认值兜底），不用在每次调用localStorage.getItem的时候都重复写容错逻辑，能避免很多因为本地缓存格式异常导致的白屏问题。

当然如果是那种整个应用生命周期只会读一次、永远不会更新、也不需要驱动视图更新的静态值（比如本地存的构建版本号），直接读LocalStorage完全没问题，但你当前的业务场景明显不满足这个条件，用Vuex托管这部分状态是更稳妥的选择。

内容的提问来源于stack exchange，提问作者Trispo