Vue学习笔记-项目开发3.11Vuex的高级应用及localStore应用

最新推荐文章于 2024-06-11 16:47:46 发布
最新推荐文章于 2024-06-11 16:47:46 发布
阅读量505 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kasey_L/article/details/104748801
版权

一、localStorage本地存储

       1、当我们在实际应用场景中，选择一个城市之后，当下次进入到页面时显示的应该是上次选择的城市，如果写成默认的，每次刷新页面后会变成默认值，所以此时增加进localStorage的概念（H5中提供类似cookie的功能）
在这里插入图片描述在store的index.js中直接使用localStorage即可，不需要引入其他包

       2、当我们在使用localStorage的时候，如果用户关闭的了本地存储，或者本地存储不能使用的话，直接使用的话，就会报错，导致页面不能直接使用，所以此时需要增加try…catch来捕获这种异常 《代码中存在一个错误，catch后要跟一个空格》
在这里插入图片描述
       3、代码项目化：单独分离出state和mutations的使得代码更加符合项目开发，且维护性更高
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

       3A、代码优化：当我们选择的城市名称过长时会将内容向下扩充，将代码修改成图中内容，设置最小宽度和定位间距
在这里插入图片描述

二、vuex的高级使用

       1、mapState的使用
        ①mapState可以传数组
Header.vue 和list均修改下
        ②mapState可以传对象
在这里插入图片描述
       2、mapMutations的使用（List和search均需要修改）
在这里插入图片描述
       【注】…mapState和…mapMutations可以简化之前vuex的仓库的操作流程，不需要写复杂的commit等触发函数

       3、getters的使用：如果需要计算得到一些数据时可以使用，这样可以解决数据的冗余
在这里插入图片描述
在这里插入图片描述
       3A、对于有多个模块时，就需要建立多个state和mutations，这事就需要引入vuex的模块功能，单独建立属于自己的模块
在这里插入图片描述

Kasey_L
关注
管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管.zip
02-25
【标题】"管理系统系列--vue-antd-admin基于vue-cli4+vuex+ant-design-vue开发的后台管理框架"揭示了这是一个使用特定技术栈构建的后台管理系统。它主要基于Vue.js，利用Vue CLI 4（Vue.js的命令行工具）进行快速...
Vue入门(四)LocalStorage的使用
fajing_feiyue的博客
11-27 5502
前言 这个系列是vue入门系列，在讲解的时候主要以例子，展示一些vue内容的基本用法。在vue项目中使用LocalStorage 的场景非常多，这里用一个小例子展示LocalStorage的使用。 案例 一、LocalStorage 的作用 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在
如何在Vue3中使用本地存储localStorage保存数据？
最新发布
有我更精彩的博客
06-11 2740
是 Web Storage API 的一部分，允许我们在用户的浏览器中存储和检索数据。与不同，中的数据在浏览器会话结束后不会被删除，除非显式地被清除。这使得成为持久化数据的理想选择，如用户设置、购物车信息等。Vue3 是一个用于构建用户界面的渐进式JavaScript框架。相较于Vue2，Vue3在性能优化、组合API的引入、TypeScript支持等方面有显著提升。下面我们会结合Vue3，来看如何利用来保存数据。在这篇博客中，我们探讨了如何在 Vue3 中使用。
5.6 Vue中的localStorage和sessionStorage浏览器端数据存储机制
蚊者逆袭的博客
04-26 3697
在 Vue 中，localStorage 是一种用于浏览器端数据存储的机制，它可以让你把数据存储在客户端本地。
Vue中如何进行本地存储（LocalStorage）
stormjun的博客
09-21 8386
本地存储（LocalStorage）是浏览器提供的一种机制，允许Web应用程序在用户的浏览器中存储数据。这些数据以键值对（key-value pairs）的形式存储，并且可以在浏览器会话之间保持持久性。本地存储是基于域名的，这意味着数据将与特定域名相关联。存储在LocalStorage中的数据在浏览器关闭后仍然保留，直到被明确删除。浏览器为每个域名提供了一定的LocalStorage存储容量，通常为5-10MB。超出容量限制时，需要谨慎管理存储数据。
Vue中localStroage存储
ioszhanghui的博客
07-01 1440
在Vue写项目的时候，有时候会存储一些用户的登录数据到本地，因为localStorage存储不受时间的限制，这就涉及到localStorage的增删改查。 1.增加数据 //保存数据 window.localStorage.setItem(key,value); 2.获取数据 //localStorage获取数据 window.localStrorage.getItem(key); ...
vue-cli-plugin-modular-vuex:为Vue CLI 3插件创建模块化Vuex存储
05-19
vue-cli-plugin-模块化vuex 为创建模块化Vuex存储 安装 如果尚未安装vue-cli 3，请先按照此处的安装说明进行操作： : 提示：如果由于仍然需要vue init而不想覆盖当前的vue-cli，请。 使用vue-cli 3.0生成项目 ...
Vue开发-基于vue+vuex+localstorage实现的本地记事本项目.zip
05-09
4. **项目结构**：项目文件名表明，整个项目可能包含了Vue项目的标准结构，如`src`目录下可能有`components`（存放组件）、`views`（存放视图）、`store`（存放Vuex相关代码）、`App.vue`（主应用组件）和`main.js`...
在Vue-cli里应用Vuex的state和mutations方法
10-18
在Vue-cli中应用Vuex管理状态和提交mutation，首先需要了解几个核心概念，包括Vue-cli、Vuex、state以及mutations。 Vue-cli是Vue.js的官方脚手架工具，它可以帮助开发者快速搭建一个Vue.js的项目环境。它提供了...
vue-router-vuex-示例：vue + vue-router + vuex
01-31
vue-router-vuex-示例 Vue + Vue路由器+ Vuex + Webpack入门项目创建该存储库是为了演示一个简单的应用程序，该应用程序使用vue和vue-router-sync通过状态管理模式在整个应用程序中传递数据。要求要运行此程序，需要...
vue 如何设置localstoreage，及运用到项目中
czx3387170的博客
07-08 2217
先导出-存 export const setStore = (name, content, maxAge = null) => { if (!global.window || !name) { return } if (typeof content !== 'string') { content = JSON.stringify(content) } // const storage = global.window.localStorage storage.
vuex存储localStore数据
苗雪松的博客
03-03 649
//存储store数据 import { validatenull } from '@/util/validate' import website from '@/const/website' const keyName = website.key + '-' /** * 存储localStorage */ export const setStore = (params = {}) => { let { name, content, type } = params
Vuex 和 localStorage 的区别：理解内存与本地存储的不同
m0_68956554的博客
01-26 2130
Vuex 和 localStorage 的区别
vue项目笔记（20）-localStorage的使用
从零出发
08-16 3902
vue中localStorage的使用 在原有的项目中，需要缓存效果。h5中新增了localstorage，可以用于缓存。代码修改如下： store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); let defaultCity = '北京'; try { if (localStorage.c...
1.vueuse-useLocalStorage在项目中的使用
weixin_42386379的博客
04-10 2919
vueuse-useLocalStorage在项目中的使用
localstorage的用法
liangmaxmin的博客
03-23 899
localstorage是将网页上的数据保存在本地浏览器上和cookie差不多不同的是 localstore存储容量大（5MB)。主要是为减少服务器与浏览器间的交互。多用于记住密码和对网页的个性化设置。缺点是不能同步到不同的设备上，即浏览器清除数据时这些设置也恢复初始化。 localstore存储对象只能为string export function saveToLocal(id , key , ...
使用 localStorage 存储 JavaScript 几乎所有数据类型
dizuncainiao的博客
12-13 1796
100% 基于 localStorage纯原生封装，支持string、number、boolean、null、undefined、NaN、object、Set、Map、bigint、symbol 多达 11 种数据类型本地存储，更好的 localStorage 解决方案，1:1 实现 localStorage api 用法，100%同步写法，无 async 、await
探索LocalStore：一个高效本地存储解决方案
gitblog_00042的博客
04-08 515
探索LocalStore：一个高效本地存储解决方案 项目地址:https://gitcode.com/xueduany/localstore 本文将向您介绍LocalStore，这是一个强大的JavaScript库，旨在优化Web应用的本地数据存储和管理。无论您是前端开发者还是对Web性能优化感兴趣，LocalStore都值得您的关注。 项目简介 LocalStore是一个轻量级的、基于浏览器原生...
vue3使用localStorage实现登录注册
qq_50951790的博客
01-14 4993
vue3使用将新用户信息存储到localStorage存储实现登录注册
在vue-element-admin中使用Vuex
09-05
在使用 Vuex 的 Vue 项目中，你需要先在 src 目录下新建一个文件夹 store，然后在 store 目录下新建一个 index.js 文件。 在 index.js 文件中，你需要先引入 Vue 和 Vuex，然后使用 Vue.use(Vuex) 安装 Vuex。接着，你可以定义 Vuex 的 state、getters、mutations 和 actions。 例如： ``` import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, getters: { doubleCount (state) { return state.count * 2 } }, mutations: { increment (state) { state.count++ } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } }) export default store ``` 然后，你就可以在 main.js 文件中引入 store 并将其挂载到 Vue 实例上了： ``` import store from './store' new Vue({ store, render: h => h(App) }).$mount('#app') ``` 之后，你就可以在组件中使用 this.$store 访问 Vuex store 了。例如，你可以在组件的 computed 属性中使用 getters： ``` computed: { doubleCount () { return this.$store.getters.doubleCount } } ``` 你也可以在组件的 methods 属性中使用 mutations 来更改 store 中的状态： ``` methods: { increment () { this.$store.commit('increment') } } ``` 或者使用 actions 来执行异步操作： ``` methods: { incrementAsync () { this.$store.dispatch('incrementAsync') } } ``` 希望这些内容能帮到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值