在Nuxt的computed计算属性中访问localStorage是否可行？

你遇到的localStorage not defined报错和computed本身无关，和Nuxt的SSR运行机制直接相关。

报错根本原因 #

• Nuxt默认开启服务端渲染时，代码会分两阶段执行：先在Node.js服务端执行生成静态HTML，再送到客户端完成hydration激活。服务端运行环境没有浏览器的全局API，localStorage是仅客户端存在的API，只要在服务端执行阶段访问就会抛出未定义错误。
• 非docker环境没有报错大概率是你本地运行的是SPA模式、静态生成版本，或者dev模式下热更新时跳过了服务端执行逻辑；docker环境运行的是标准SSR生产模式，触发了服务端的computed计算逻辑才暴露了问题。

是否可以在Nuxt的computed属性中访问localStorage #

可以，只要增加客户端执行判断，避免服务端阶段访问即可。

修复后的代码示例 #

<template>
    <v-data-table
      //... item binds etc
      :items-per-page="itemsPerPage"
      @update:items-per-page="itemsPerPageUpdated"
    >
</template>

<script>
  // ...
  data: () => ({
    // ...
    _itemsPerPage: 10,
  }),

  computed: {
    itemsPerPage() {
      // 新增客户端判断，仅浏览器环境读取localStorage
      if (process.client) {
        this._itemsPerPage = localStorage.getItem("itemsPerPageDevice") || 10
      }
      return parseInt(this._itemsPerPage, 10)
    },
  },
  methods: {
    itemsPerPageUpdated(val){
      this._itemsPerPage = val;
      localStorage.setItem("itemsPerPageDevice", val);
    },
  },
</script>

其他可选优化方案 #

• 如果你不需要用到computed的响应式特性，也可以把读取localStorage的逻辑移到mounted生命周期中，mounted仅会在客户端执行，天然不会触发服务端报错。
• 如果你使用的是Nuxt3，也可以用useCookie替代localStorage存储用户偏好，cookie可以同时在服务端和客户端读取，无需额外判断。

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