在Nuxt.js项目中如何在store的state内访问localStorage？

错误写法的原因 #

你之前的写法不符合SSR框架的store初始化逻辑：

• 第一种写法服务端执行state函数时未命中process.client分支，没有返回任何状态对象，导致初始state结构为空，客户端注水（hydrate）阶段会直接沿用服务端返回的空结构，即使客户端侧state函数返回了有效值也会被覆盖
• SSR场景下store的初始化流程是：服务端先生成完整的state序列注入到客户端HTML，客户端初始化store时会优先用服务端注入的state做结构对齐，不会直接采用客户端侧state函数的返回值替换，因此你第二种写法的客户端分支返回值永远不会生效

正确实现步骤 #

1. 先定义统一的state初始结构 #

无论服务端还是客户端，都返回结构一致的初始state，避免hydration不匹配报错：

export const state = () => ({
  // 给服务端渲染阶段用的默认值，后续客户端会更新
  isAuth: null
})

2. 新增mutation用于更新state #

export const mutations = {
  setIsAuth(state, value) {
    state.isAuth = value
  }
}

3. 在客户端专属生命周期读取localStorage更新state，二选一即可： #

• 方案1（Nuxt框架推荐）：使用nuxtClientInit action，该action只会在客户端初始化store时自动执行

export const actions = {
  nuxtClientInit({ commit }) {
    const authStatus = localStorage.getItem('isAuth')
    commit('setIsAuth', authStatus)
  }
}

• 方案2（通用所有SSR框架）：在根组件的mounted钩子中触发更新，mounted生命周期仅在客户端执行

// 根组件/App.vue/布局默认组件的script部分
export default {
  mounted() {
    const authStatus = localStorage.getItem('isAuth')
    this.$store.commit('setIsAuth', authStatus)
  }
}

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