在计算属性中访问本地存储

Question

我正在尝试在本地存储中记录一些用户偏好，以便于使用我的网站。我写了这段代码，它似乎有效。

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

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

  computed: {
    itemsPerPage() {
      this._itemsPerPage = localStorage.getItem("itemsPerPageDevice") || 10
      return parseInt(this._itemsPerPage, 10)
    },
    // ...
  methods: {
    itemsPerPageUpdated(val){
      this._itemsPerPage = val;
      localStorage.setItem("itemsPerPageDevice", val);
    },

  },

</script>

但我不确定计算属性在 nuxt 生命周期中的位置。我在 docker 环境中遇到一个错误，说“localStorage not defined”，但在 docker.

之外从未出现过这个错误

我的问题是，在 nuxt 中访问计算属性中的 localStorage 可以吗？

Answer 1

没问题，但仅限于客户端，因此您需要在使用 localStorage 之前检查 process.client:

computed: {
    itemsPerPage() {
      if (process.client) {
        this._itemsPerPage = localStorage.getItem("itemsPerPageDevice") || 10
        return parseInt(this._itemsPerPage, 10)
      } else {
        return 10
      }
    },
}

Answer 2

您可以使用上面的解决方案来查看是否在您的上下文中定义了 localStorage（window 的 API 只能在客户端访问，因此不能在服务器上访问在被 SSR 的时候）。

您可以进行类似 process.client 的测试，或使用旨在实现通用单一用途并不再为这些条件而烦恼的软件包之一：

在计算属性中访问本地存储

Accessing local storage in computed property

local-storage

nuxt.js

在计算 属性 中访问本地存储

Accessing local storage in computed property

local-storage

nuxt.js

在计算属性中访问本地存储