怎么制作ppt课件_泰安新闻网今日头条_优化师培训机构_数字化营销怎么做

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()]
})