免费响应式网站模板/seo刷词

免费响应式网站模板,seo刷词,呼和浩特装修网站,哪里可以做宝盈网站vuex持久化存储,手动保存到localStorage 一、vue21. 手动存储到localStoragestore/index.js 2. 使用持久化存储插件store/index.jsstore/modules/otherData.js保存到localStorage 二、vue31. index.ts2. store/modules/globalData.ts3. 在组件中使用App.vue 一、vue…

vuex持久化存储,手动保存到localStorage

  • 一、vue2
    • 1. 手动存储到localStorage
      • store/index.js
    • 2. 使用持久化存储插件
      • store/index.js
      • store/modules/otherData.js
      • 保存到localStorage
  • 二、vue3
    • 1. index.ts
    • 2. store/modules/globalData.ts
    • 3. 在组件中使用App.vue


一、vue2

1. 手动存储到localStorage

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)// 本地存储-修改
const storageSet = (key, value) => {localStorage.setItem(key, JSON.stringify(value))
}// 本地存储-获取
const storageGet = (key) => {return JSON.parse(localStorage.getItem(key))
}export default new Vuex.Store({// 数据源 使用:this.$store.state.xxxstate: {user: {} // 用户信息},// 派生数据 使用:this.$store.getters.xxxgetters: {// 获取当前-用户对象GET_USER(state) {state.user = storageGet('STORE_USER') || {}return state.user}},// 更改数据-同步 使用:this.$store.commit('xxx', data)mutations: {// 保存当前-用户对象SET_USER(state, data) {state.user = datastorageSet('STORE_USER', data)}},// mutations装饰器-异步actions: { }
})

2. 使用持久化存储插件

store/index.js

提示:vuex持久化存储

import Vue from 'vue'
import Vuex from 'vuex'// Vuex持久化存储
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({storage: window.localStorage
})import otherData from "./modules/otherData.js"Vue.use(Vuex)const state = {}const getters = {}const mutations = {}const actions = {}export default new Vuex.Store({state,getters,mutations,actions,modules: {// 模块命名,要在 js文件 声明namespaced: true才有用otherData,},plugins: [vuexLocal.plugin]
})

store/modules/otherData.js

// state
let state = {// 字典数据dictionaryData: [],
}// getters
let getters = {// 字典数据get_dictionaryData(state) {return state.dictionaryData},
}// mutations,以isShow属性为例
let mutations = {// 字典数据change_dictionaryData(state, data) {state.dictionaryData = data},
}// ctions
let actions = {// 这里有两种写法,本质上一样// 写法1,无参asChangeShow(context) {context.commit('changeShow')},// 写法2,无参// asChangeShow({ commit }) {//     commit('changeShow')// }//有参asChangeName({ commit }, data) {commit('changeName', data)}
}
export default {namespaced: true, // 是否开启模块state,getters,mutations,actions
}

保存到localStorage

App.vue

created() {// 在页面加载时读取localStorage里的状态信息if (localStorage.getItem("store")) {this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(localStorage.getItem("store"))))}// 在页面刷新时将vuex里的信息保存到localStorage里window.addEventListener("beforeunload", () => {localStorage.setItem("store", JSON.stringify(this.$store.state))})
}

二、vue3

1. index.ts

// store/index.js  
import { createStore } from 'vuex'; // 从 localStorage 中获取初始状态 
const savedState = localStorage.getItem('vuexState');  
const initialState = savedState ? JSON.parse(savedState)  : {}; import globalData from "./modules/globalData"const store = createStore({ state() { return initialState; }, mutations: { }, actions: { }, getters: { },modules: {globalData,}
}); // 监听状态变化,将状态保存到 localStorage 
store.subscribe((mutation,  state) => { localStorage.setItem('vuexState',  JSON.stringify(state));  
}); export default store; 

2. store/modules/globalData.ts

const state:any = {menuList: []
}
const mutations:any = {change_menuList(state: any, data: any){state.menuList = data}menuList: []
}
export default {namespace: "globalData",state,mutations,
}

使用

<script setup> 
import { useStore } from 'vuex'; const store = useStore(); store.state.globalData.menuList // 获取
store.commit("change_menuList", menu) //更新</script>

3. 在组件中使用App.vue

<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> 
</template> <script setup> 
import { useStore } from 'vuex'; const store = useStore(); const count = store.getters.getCount;  const increment = () => { store.dispatch('increment');  
}; const decrement = () => { store.dispatch('decrement');  
}; 
</script> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/73729.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nodejs使用 mysql2 模块获取 mysql 中的 json字段,而不是 mysql

mysql 模块获取的 json 字段&#xff0c;是字符串mysql2 模块获取的 json 字段&#xff0c;是符合预期的 json 对象 mysql mysql2 最后编辑于&#xff1a;2025-02-24 22:16:53 © 著作权归作者所有,转载或内容合作请联系作者 喜欢的朋友记得点赞、收藏、关注哦&#xff01;…

【网工第6版】第1章 计算机网络概论

目录 1计算机网络形成和发展 ■计算机网络 ■我国互联网发展 ■计算机网路分类 ■计算机网络应用 2 OSI和TCP/IP参考模型 ■网络分层的意义 ■OSI参考模型 ■TCP/IP参考模型 ■TCP/IP参考模型协议 3 数据封装与解封过程 ■封装 ■解封 1计算机网络形成和发展 ■计…

理解我们单片机拥有的资源

目录 为什么要查询单片机拥有的资源 所以&#xff0c;去哪些地方可以找数据手册 一个例子&#xff1a;STM32F103C8T6 前言 本文章隶属于项目&#xff1a; Charliechen114514/BetterATK: This is a repo that helps rewrite STM32 Common Repositorieshttps://github.com/C…

《我的Python觉醒之路》之转型Python(十五)——控制流

[今天是2025年3月17日&#xff0c;继续复习第一章节、第二章节的内容 ] 《我的Python觉醒之路》之转型Python&#xff08;十四&#xff09;——控制流

AndroidStudio+Android8.0下的Launcher3 导入,编译,烧录,调试

文章目录 编译完成搜索输出文件Android.mk配置gradle编译环境报错一报错二报错三输出文件下载INSTALL_FAILED_TEST_ONLY查找系统签名查找签名工具开始签名查看签名签名问题重新生成秘钥解决方案生成成功挽救错误:重新刷机更换testkey秘钥keystore生成keystoreINSTALL_FAILED_S…

Linux--gdb/cgdb

ok&#xff0c;我们今天学习gdb的安装和使用 调试器-gdb/cgdb使用 VS、VScode编写的代码一般都是release格式的&#xff0c;gdb 的格式一般是debug 换成debug模式命令 :-g gdb会记录最新的一条命令&#xff0c;直接回车就是默认执行该命令 一个调试周期下&#xff0c;断点…

ModBus TCP/RTU互转(主)(从)|| Modbus主动轮询下发的工业应用 || 基于智能网关的串口服务器进行Modbus数据收发的工业应用

目录 前言 一、ModBus TCP/RTU互转&#xff08;从&#xff09;及应用|| 1.1 举栗子 二、ModBus TCP/RTU互转&#xff08;主&#xff09; 2.1 举栗子 三、ModBus 主动轮询 3.1 Modbus主动轮询原理 3.2 Modbus格式上传与下发 3.2.1.设置Modbus主动轮询指令 3.2.2 设…

【操作系统安全】任务2:用户与用户组

目录 一、用户与用户组介绍 1.1 用户 1.2 用户组 1.3 用户与用户组的关系 二、用户与用户组管理 2.1 用户管理 2.1.1 创建用户 2.1.2 设置用户密码 2.1.3 删除用户 2.2 用户组管理 2.2.1 创建用户组 2.2.2 删除用户组 2.2.3 将用户添加到用户组 三、影子账户创建…

OpenCV计算摄影学(20)非真实感渲染之增强图像的细节函数detailEnhance()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 此滤波器增强特定图像的细节。 cv::detailEnhance用于增强图像的细节&#xff0c;通过结合空间域和频率域的处理&#xff0c;提升图像中特定细节…

10、基于osg引擎生成热力图高度图实现3D热力图可视化、3D热力图实时更新(带过渡效果)

1、结果 2、完整C代码 #include <sstream> #include <iomanip> #include <iostream> #include <vector> #include <random> #include <cmath> #include <functional> #include <osgViewer/viewer> #include <osgDB/Read…

Pycharm 社区版安装教程

找到安装包双击安装文件---点击下一步 一般路径是&#xff1a;C:\Rambo\Software\Development 选择完成后就是如下地址&#xff1a; C:\Rambo\Software\Development\PyCharm Community Edition 2024.3.3 点击上述3个位置就可以了----下一步 等待安装就可以了---完成后点击完成…

Mermaid 子图 + 拖拽缩放:让流程图支持无限细节展示

在技术文档、项目管理和可视化分析中&#xff0c;流程图是传递复杂逻辑的核心工具。传统流程图往往静态且难以适应细节展示&#xff0c;而 Mermaid 与 svg-pan-zoom 的结合&#xff0c;则为这一痛点提供了完美解决方案。本文将深入解析如何通过 Mermaid 的子图&#xff08;subg…

Nature | TabPFN:表格基础模型用于小规模数据分析

表格数据是按行和列组织的电子表格形式&#xff0c;在从生物医学、粒子物理到经济学和气候科学等各个科学领域中无处不在 。基于表格其余列来填充标签列缺失值的基本预测任务&#xff0c;对于生物医学风险模型、药物研发和材料科学等各种应用至关重要。尽管深度学习彻底改变了从…

stable Diffusion 中的 VAE是什么

在Stable Diffusion中&#xff0c;VAE&#xff08;Variational Autoencoder&#xff0c;变分自编码器&#xff09;是一个关键组件&#xff0c;用于生成高质量的图像。它通过将输入图像编码到潜在空间&#xff08;latent space&#xff09;&#xff0c;并在该空间中进行操作&…

从零开始 | C语言基础刷题DAY3

❤个人主页&#xff1a;折枝寄北的博客 目录 1.打印3的倍数的数2.从大到小输出3. 打印素数4.打印闰年5.最大公约数 1.打印3的倍数的数 题目&#xff1a; 写一个代码打印1-100之间所有3的倍数的数字 代码&#xff1a; int main(){int i 0;for (i 1; i < 100; i){if (i % …

QT5.15.2加载pdf为QGraphicsScene的背景

5.15.2使用pdf 必须要安装QT源码&#xff0c;可以看到编译器lib目录已经有pdf相关的lib文件&#xff0c;d是debug 1.找到源码目录&#xff1a;D:\soft\QT\5.15.2\Src\qtwebengine\include 复制这两个文件夹到编译器的包含目录中:D:\soft\QT\5.15.2\msvc2019_64\include 2.找…

MCP 开放协议

本文翻译整理自&#xff1a; https://modelcontextprotocol.io/introduction 文章目录 简介一、关于 MCP二、为什么选择MCP&#xff1f;通用架构 三、开始使用1、快速入门2、示例 四、教程五、探索 MCP六、贡献和支持反馈贡献支持和反馈 服务器开发者一、构建服务器1、我们将要…

GaussDB备份数据常用命令

1、常用备份命令gs_dump 说明&#xff1a;是一个服务器端工具&#xff0c;可以在线导出数据库的数据&#xff0c;这些数据包含整个数据库或数据库中指定的对象&#xff08;如&#xff1a;模式&#xff0c;表&#xff0c;视图等&#xff09;&#xff0c;并且支持导出完整一致的数…

ctfshow-萌新赛刷题笔记

1. 给她 启动靶机&#xff0c;发现是sql注入&#xff0c;尝试后发现被转义\&#xff0c;思路到这里就断了&#xff0c;再看题目给她&#xff0c;想到git.有可能是.git文件泄露&#xff0c;dirsearch扫描一下果然是&#xff0c;用GitHack看一下git备份文件&#xff0c;得到hint…

Transformer:GPT背后的造脑工程全解析(含手搓过程)

Transformer&#xff1a;GPT背后的"造脑工程"全解析&#xff08;含手搓过程&#xff09; Transformer 是人工智能领域的革命性架构&#xff0c;通过自注意力机制让模型像人类一样"全局理解"上下文关系。它摒弃传统循环结构&#xff0c;采用并行计算实现高…