Pinia 和 localStorage 的奇妙关系

说起 Pinia，你可Neng会想到全局状态，像个大锅饭。

可你有没有想过它有时候会被当成第二个 localStorage 用？

哈哈，我跟你聊聊这事儿，顺便拎几把 “坑”。

Pinia 是 Vue3 官方推荐的状态管理库。

它比 Vuex 轻量，又geng友好。

用起来像写普通 JS 对象，defineStore 一下就Neng开箱即用。

因为刷新页面状态就没了。

于是hen多人把 state 持久化到浏览器的本地存储。

这听起来hen自然： localStorage.setItem)

再来个 onMounted 把数据读回来。

结果呢？咱们的 Pinia 像变成了另一个 localStorage，双份数据在跑。

先别急，先把层级划清楚。

应用级状态

  用户信息、权限、主题、路由 ← Pinia   生命周期：跟整个应用一起活，一般不销毁。

页面级状态

  筛选条件、表格分页、弹窗、轮询、草稿 ← Page Scope   生命周期：跟页面可见性走，离开/销毁时回收。

组件级状态

  输入框、UI 局部态、私有交互 ← ref / reactive   生命周期：跟组件实例走。

┌─────────────────────────────────────────────────┐
│  应用级状态                                      │
│  用户信息 / 权限 / 主题 / 路由                  │
│          ← Pinia                               │
│  生命周期:跟应用一起活,通常不销毁              │
├─────────────────────────────────────────────────┤
│  页面级状态                                      │
│  筛选条件 / 表格分页 / 弹窗 / 轮询 / 草稿        │
│          ← Page Scope                           │
│  生命周期:跟页面可见性走,离开/销毁时回收        │
│     ★ 长期被忽视的中间层                         │
├─────────────────────────────────────────────────┤
│  组件级状态                                      │
│  输入框 / UI 局部态 / 私有交互                  │
│          ← ref / reactive                       │
│  生命周期:跟组件实例走                          │
└─────────────────────────────────────────────────┘

这个中间层太大，塞不回组件；又不够全局，不该污染 Pinia。

它本质上是给每个页面创建一个独立的 effectScope，在 setup 内初始化，

# 推荐单字段场景#

# 推荐一次性持久化整个 Store #

# 启动时读，变化时写 #

- 登录状态配合路由守卫。 - Token 建议只放内存，不要直接存 localStorage。 - 用 localStorage 存布尔值geng安全。 - 登出时同步清理冗余数据和 Pinia 状态。 - Ru果用了 keep-alive，要记得在 leave 时手动清理定时器。

a) 内容太细碎，没有明确关键词密度。 b) 没有结构化的标题层次被搜索引擎抓取不到。 c) 大段代码块缺少注释解释，让爬虫误判为噪声。 d) Zui关键的是——没有外链或内部链接指向，这让权重飙不上去。

import { defineStore } from 'pinia'
export const useCounterStore = defineStore({
  id: 'counter',
  state:  => ({
    count: JSON.parse || '0')
  }),
  actions: {
    increment {
      this.count++
      localStorage.setItem)
    },
    reset {
      this.count = 0
      localStorage.removeItem
    }
  }
})

import { definePageScope } from 'vue-page-scope'
export const useOrderScope = definePageScope('orderList', {
  // 页面输入 & 接口原始返回
  source:  => ({
    response: null,
    query: {}
  }),
  // 基础业务状态
  state:  => ({
    keyword: '',
    page: 1,
    pageSize: 20,
    selectedIds: ,
    deleteDialogVisible: false,
    deleteConfirmLoading: false,
    detailDrawerVisible: false,
    currentDetailId: null,
    columnsConfig: ,
    tempEditDraft: null,
    pollTimer: null,
    lastFetchedAt: null,
    activeTab: 'basic',
  }),
  // 派生计算属性
  getters: {
    list { return this.$source.response?.list ||  },
    total { return this.$source.response?.total || 0 },
    hasSelection { return this.selectedIds.length> 0 },
  },
  // 自动追踪 loading 的异步 action
  actions: {
    async search {
      const res = await api.getOrders({
        keyword:this.keyword,
        page:this.page,
        pageSize:this.pageSize,
      })
      this.$source.response = res
    }
  },
  // 页面进入时自动执行
  enter {
    this.$source.query = this.$route.query   // 桥接路由查询参数
    this.search
    // 每5秒刷新一次列表，离开自动清理无需手写 clearInterval
    this.$setInterval => this.search, 5000)
  },
  // 离开时Ke以留空，scope 会帮你统一 stop 掉所有副作用
  leave {}
})

Aha，这样子组件根本不知道父页面用了哪个 store 名字，实现零耦合。

C…咱就是说有时候我们把 Pinia 当成了全局缓存，而又往里塞进一堆持久化逻辑。

- 那么每次刷新dou要从两边读取一次数据，你懂的，是不是有点浪费？ - geng糟糕的是Ru果两个地方的数据不同步，就会出现“我这里是 A，你这里是 B”的尴尬局面。哈哈哈！

- 把业务核心数据放进 Pinia，只在需要跨页保持的数据上Zuo持久化。比如用户主题或登录态布尔值。 - 对于临时表单草稿，用 page scope 或者直接 component state 保存到 sessionStorage 就行。 - 永远不要把整个 Store 丢进 localStorage，这会导致序列化成本高，还可Neng泄露敏感信息。

- 使用 $setInterval, 它内部Yi经绑定到当前 scope，一旦页面离开就会自动 stop，无需手写 clearInterval。 - 所有 watch dou写在 scope 内部，同样会随 scope.stop 一起销毁。这样ZuoKe以避免内存泄漏，也省了不少 onBeforeUnmount 的 boilerplate。

Pina 是全局的，但它Ke以像第二个 LocalStorage 那样只负责持久化核心数据；而真正需要隔离生命周期的业务逻辑，则交给 Page Scope 去管.