pinia-plugin-persist、vuex

时间：2025-04-07 22:53:43

pinia-plugin-persist

  • 作用：为 Pinia 状态管理库实现状态持久化，自动将指定的 Pinia store 状态保存到本地存储（如 localStorage 或 sessionStorage），并在应用启动时从本地存储恢复状态。
  • 效果：确保应用状态在页面刷新、浏览器关闭再打开等情况下不丢失，提升用户体验。比如用户在填写表单过程中刷新页面，已填内容仍保留；登录状态在刷新后也能保持。
  • 与 Vuex 的区别：pinia-plugin-persist 是 Pinia 的插件，专注于状态持久化；Vuex 是完整的状态管理库，包含状态管理的各个方面。Pinia 语法更简洁，pinia-plugin-persist 使状态持久化配置更方便。
  • 意义2：让开发者无需手动编写复杂的存储和读取逻辑，专注于业务逻辑开发，简化了状态持久化的实现过程。
  • 应用案例：
    • 电商购物车：用户添加到购物车的商品信息在页面刷新或下次打开应用时仍存在，方便继续结算。
    • 用户个性化设置：用户设置的界面主题、布局方式等，再次访问应用时保持不变。
  • 代码案例5：

javascript

// 引入Pinia和pinia-plugin-persist
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'

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

// 定义Store
export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    token: ''
  }),
  persist: true // 简单开启，默认存储到localStorage，也可进行更详细配置
  // 或者
  // persist: {
  //   key: 'custom-user-store-key', // 自定义存储的键名
  //   storage: sessionStorage // 更改存储位置为sessionStorage
  // }
})

Vuex3

  • 作用：作为专为 Vue.js 应用开发的状态管理模式和库，采用集中式存储管理应用所有组件的状态，以可预测的方式保证状态变化，方便组件间共享状态、管理复杂应用状态。
  • 效果：实现状态集中管理，降低组件间耦合度，使状态变化可预测、易追踪和调试，方便多组件共享状态，简化组件通信。
  • 与 pinia-plugin-persist 的区别：Vuex 是综合性状态管理方案，包含状态、获取器、变化、动作等概念；pinia-plugin-persist 是 Pinia 实现状态持久化的插件。
  • 意义：解决大型 Vue 应用中组件状态管理复杂的问题，让数据流动更清晰可控，提升开发和维护效率。
  • 应用案例：
    • 大型单页应用：如企业级后台管理系统，不同组件可能需要共享用户权限、菜单配置等状态，用 Vuex 可方便管理。
    • 多组件频繁通信场景：如社交类应用中，动态列表组件、评论组件等可能都需要访问和更新用户点赞状态，通过 Vuex 管理该状态，能简化组件间通信。
  • 代码案例：

javascript

// 引入Vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建Store
export default new Vuex.Store({
  state: {
    // 所有任务列表
    list: [],
    // 文本输入框中的值
    inputValue: 'AAA'
  },
  mutations: {
    initList(state, list) {
      state.list = list
    },
    setInputValue(state, value) {
      state.inputValue = value
    }
  },
  actions: {
    getList(context) {
      axios.get('/list.json').then(({ data }) => {
        console.log(data);
        context.commit('initList', data)
      })
    }
  },
  getters: {
    // 添加了一个showNum的属性
    showNum: state => {
      return '最新的count值为：' + state.count;
    }
  }
})

在使用 Vuex 持久化时，通常会使用 vuex - persistedstate 插件，示例如下：

javascript

import createPersistedState from 'vuex - persistedstate'

const store = new Vuex.Store({
  // 其他配置...
  plugins: [createPersistedState()]
})

相关文章