vue3+vite+ts：玩转 LocalStorage 和 Pinia，轻松管理缓存和全局状态

2022-12-10 04:22:46

LocalStorage 和 Pinia：管理持久化状态和全局状态的最佳拍档

在现代 Web 开发中，管理状态至关重要。存储用户设置、跟踪购物车内容，甚至是维护复杂的应用程序状态都需要可靠且高效的解决方案。本文将深入探究 LocalStorage 和 Pinia，这两个功能强大的工具，它们协同工作，让前端开发人员轻松掌控缓存和全局状态。

什么是 LocalStorage 和 Pinia？

LocalStorage 是浏览器提供的 API，允许您在客户端存储数据，即使页面关闭或重新加载，数据也不会丢失。它特别适合存储经常使用的数据，例如用户设置或购物车内容。

Pinia 是 Vuex 的轻量级替代品，它是一个状态管理库，用于管理 Vue 组件中的全局状态。它提供了一个集中存储和管理状态的地方，简化了组件之间的状态共享。

为什么使用 LocalStorage 和 Pinia？

LocalStorage：

提供持久化存储，即使页面关闭或重新加载，数据也不会丢失。
非常适合存储经常使用的数据，如用户设置、购物车内容等。

Pinia：

提供一个集中管理全局状态的场所。
使得在组件之间共享状态变得更加容易。
可以轻松地将状态持久化到 LocalStorage。

如何使用 LocalStorage 和 Pinia？

使用 LocalStorage

使用 window.localStorage 对象来存储数据：

setItem() 方法：设置一个值。
getItem() 方法：获取一个值。
removeItem() 方法：删除一个值。

使用 Pinia

安装 Pinia：npm install pinia

创建一个 Pinia 存储实例，并在 Vue 组件中使用 useStore() 钩子来访问它。

如何将 Pinia 状态持久化到 LocalStorage？

使用 pinia-plugin-persist 插件：

安装 pinia-plugin-persist：npm install pinia-plugin-persist

创建 Pinia 插件，将 Pinia 状态持久化到 LocalStorage。

在 Pinia 存储实例中添加插件。

实例演示

// store.js
import { createPinia } from 'pinia'
import persist from './plugins/persist'

const pinia = createPinia()
pinia.use(persist)

export default pinia

// plugins/persist.js
import { defineStorePlugin } from 'pinia'

export default defineStorePlugin(({ store }) => {
  store.$subscribe((mutation, state) => {
    window.localStorage.setItem('pinia-state', JSON.stringify(state))
  })
})

// App.vue
import { useStore } from 'pinia'

const store = useStore()

export default {
  data() {
    return {
      count: store.state.count
    }
  },
  methods: {
    increment() {
      store.dispatch('increment')
    }
  }
}