前端:Vue学习-4

前端:Vue学习-4

    • 1. 组件缓存 keep-alive
    • 2. 状态管理工具 - Vuex
      • 2.1 vuex 提供数据&使用数据 - mapState
      • 2.2 mutations 修改数据 - mapMutations
      • 2.3 actions - 异步操作 - mapActions
      • 2.4 getters - 计算属性 - mapGetters
    • 3. Vuex 模块 modules - state,mutations,actions,getters

1. 组件缓存 keep-alive

keep-alive是vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。keep-alive是一个抽象组件:它自身不会渲染成一个dom元素,也不会出现在父组件当中。
keep-alive的优点是,在组件切换过程中,把切换出去的组件保留在内存中,防止重复渲染dom,减少加载时间及性能消耗,提高用户体验。
keep-alive三个属性:include被缓存的组件、exclude不被缓存的组件、max最多可以缓存的组件实例

<template><div id="app"><keep-alive :include="p"><router-view></router-view></keep-alive></div>
</template><script>export default {name: 'App',data(){return{p:['Home']}},components: {}
}
</script>
<script>
export default {name:'Home',created(){console.log('组件被加载');},mounted(){console.log('组件dom渲染完了');},destoryed(){console.log('组件被销毁');},activated(){console.log('组件被激活时触发!');},deactivated(){console.log('组件失活时被触发!');}
}
</script>

运行结果:
请添加图片描述

不过上述这个运行结果中keep-alive起是起作用了,但是存在一个问题就是回到列表组件时,重新刷新了以下当前页面,不知道什么原因?。。。
组件被缓存后,created、mounted、destoryed函数就不会被触发。所以提供了activated和deactivated,activated表示组件被激活时触发,而deactivated是组件失活时触发。

2. 状态管理工具 - Vuex

vue2 vue-router3 vuex3
vue3 vue-router4 vuex4
vuex是一个vue的状态管理工具,状态就是数据,可以管理vue通用的数据(多组件共享的数据)。

安装命令为:

npm install vuex@3

项目下创建目录store,并在该目录下创建文件index.js
,index.js里的代码如下:

import Vue from "vue"
import Vuex from "vuex"Vue.use(Vuex);
// 插件安装
const vuex = new Vuex.Store();
// 创建仓库export default vuex
// 导出

在mian.js中导入即可。

import store from '@/store/index'new Vue({render: h => h(App),store
}).$mount('#app')

2.1 vuex 提供数据&使用数据 - mapState

提供数据在Vuex.Store对象添加state属性即可。

const store = new Vuex.Store({state:{count:101}
});

使用数据$store.state.xxx

<p>{{$store.state.count}}</p>

created(){console.log(this.$store.state.count);}

在这里插入图片描述
mapState
另外可以通过辅助函数来使用数据。mapState,可以帮助我们把store中的数据自动映射到组件的计算属性上

import {mapState} from 'vuex'computed:{...mapState(['count'])}
// 计算属性<p>{{count}}</p>
// 页面上进行渲染

2.2 mutations 修改数据 - mapMutations

vuex遵循单向数据流,组件中不能直接修改仓库的数据。

this.$store.state.count = 102
// 错误代码

上述代码vue并不会报错,可以在vuex配置中添加strict:true严格模式,这样就可以看到报错信息了。

const store = new Vuex.Store({strict:true
});

因为不能直接修改store中的数据,那么也就是说需要在store中定义修改数据的方法,然后在组件中调用这个方法即可,直接在store对象上添加属性mutations对象,在这个下面定义方法即可。

const store = new Vuex.Store({state:{count:101},strict:true,mutations:{setCount(state){state.count = 102 }}
});

组件中调用使用 $store.commit(‘方法名’)

<button @click="$store.commit('setCount')">修改</button>

运行结果:
请添加图片描述
mutations传参,在mutations下定义方法,第一参数为:state,第二个参数就是我们需要传递的参数。调用方法时,使用 $store.commit(‘xxx’,参数)

setCount(state,n){state.count += n 
}
<button @click="$store.commit('setCount',2)">修改</button>

mutations下定义的方法有且只能有一个,如果需要传递多个,那么参数类型可以为对象或者数组

mapMutations
把位于mutations中的方法提取出来,映射到组件methods中。

import {mapMutations} from 'vuex'methods:{...mapMutations(['setCount'])},
<button @click="setCount(2)">修改</button>

2.3 actions - 异步操作 - mapActions

mutations必须是同步,修改state中的数据必须调用经过mutations,因此如果有异步操作需要修改state中值,那么需要在actions中调用mutations下的方法。调用actions下的方法使用 $store.dispatch(‘方法名’,参数)

const store = new Vuex.Store({state:{count:101},strict:true,mutations:{setCount(state,n){state.count += n }},actions:{setAsycCount(context,n){setTimeout(()=>{context.commit('setCount',n);},1000);}}
});
<button @click="$store.dispatch('setAsycCount',4)">1秒后修改数据</button>

运行结果:
请添加图片描述
mapActions
同mapState、mapMutations类似,直接在methods中添加对应映射即可。

import {mapActions} from 'vuex'
methods:{...mapActions(['setAsycCount'])},
<button @click="setAsycCount(4)">1秒后修改数据</button>

2.4 getters - 计算属性 - mapGetters

getters类似于计算属性,getters函数的第一个参数是state;函数必须有返回值。

const store = new Vuex.Store({state:{list:[1,2,3,4,5,6,7,8,9,10]},getters:{filterList(state){return state.list.filter(x => x > 5)}}
});
<p>{{($store.getters.filterList).join(',')}}</p>

在这里插入图片描述
mapGetters

computed:{...mapGetters(['filterList'])}
<p>{{filterList.join('|')}}</p>

在这里插入图片描述

3. Vuex 模块 modules - state,mutations,actions,getters

由于vuex使用单一状态树,应用的所有状态会集中到一个较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。
在这里插入图片描述
某个模块 store/modules/user.js

const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {state,mutations,actions,getters
}

使用 store/index.js

import user from './modules/user.js'const store = new Vuex.Store({modules:{user}
})

1.state

分模块之后,子模块的状态是会挂载到根级别的state中,属性名就是模块名。
使用模块中的数据:

  1. 使用 $store.state.模块名.xxx
  2. 通过mapState映射,默认根级别的映射 mapSate([‘xxx’]),子模块的映射为mapState(‘模块名’,[‘xxx’]),需要开启命名空间
	export default {namespaced:true, // 开启命名空间state,mutations,actions,getters
}
const state = {name:'zs'
}

使用原生方式进行访问

<p>{{$store.state.user.name}}</p>

使用mapState进行访问

computed:{...mapState('user',['name'])}
<p>{{name}}</p>

在这里插入图片描述
2.getters
使用模块中getters中的数据

  1. 直接通过 $store.getters[‘模块名/xxx’]
  2. 通过mapGetters映射,子模块的映射为mapGetters(‘模块名’,[‘xxx’]) - 需要开启命名空间
const getters = {upperName(state){return state.name.toUpperCase();}
}

原生方式进行访问

<p>{{$store.getters['user/upperName']}}</p>

使用mapGetters进行访问

computed:{...mapGetters('user',['upperName'])}
<p>{{upperName}}</p>

在这里插入图片描述

3.mutations
默认模块中的mutations和actions会被挂载到全局,需要开启命名空间,才会挂载到子模块中。

  1. 直接通过store调用 $store.commit(‘模块名/xxx’,参数)
  2. 通过mapMutations映射,子模块的映射mapMutations(‘模块名’,[‘xxx’]),需要开启命名空间
const mutations = {setName(state,newName){state.name = newName;}
}

使用原生进行修改

<button @click="$store.commit('user/setName','zl')">更新名字</button>

使用mapMutations进行修改

methods:{...mapMutations('user',['setName'])}
<button @click="setName('lz')">更新名字2</button>

运行结果:
请添加图片描述
4.actions
默认模块中的mutations和actions会被挂载到全局,需要开启命名空间,才会挂载到子模块中。

  1. 通过 $store.dispatch(‘模块名/xxx’,参数)
  2. 通过mapActions,子模块的映射为mapActions(‘模块名’,[‘xxx’]) - 需要开启命名空间
const actions = {setSyncName(context,n){setTimeout(()=>{context.commit('setName', n);},1000);}
}

使用原生进行修改

<button @click="$store.dispatch('user/setSyncName','hh')">1秒后修改名字</button>

使用mapActions进行修改

methods:{...mapActions('user',['setSyncName'])}
<button @click="setSyncName('ll')">1秒后修改名字2</button>

请添加图片描述

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

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

相关文章

day07:用户下单、订单支付

文章目录 地址薄相关相关代码需求分析和设计代码书写 用户下单需求分析和设计代码开发 订单支付微信支付介绍微信支付准备工作如何保证数据安全&#xff1f;如何调用到商户系统 地址薄相关相关代码 需求分析和设计 产品原型接口设计数据库设计 代码书写 地址薄相关代码都是单…

视频行业(监控,直播,会议,视频通话)痛点,随时接入,异构融合,以OvMeet视频会议为中心解决企业视频应用完美解决方案

近年来随着网络的普及及音视频技术的不断发展&#xff0c;以全球化、网络化、智能化未趋势的办公方式越来越受到各行各业的青睐。视频会议解决方案的应用转往多种交互式视频应用&#xff0c;如转往视频接入融合&#xff0c;调度与管理、日常沟通、工作部署、紧急救援、作战指挥…

誉天Cloud Service Solutions Architect(云服务)怎么样

誉天云服务课程亮点 深度融合云原生 包含原生K8s和docker内容&#xff0c;引入isito和ASM功能进行微服务治理&#xff0c;结合Linux功底设计云上性能优化&#xff0c;和架构设计。师资力量强大 课程由两名5HCIE认证讲师授课&#xff0c;认证辅导由已通过HCIE-Cloud Service专职…

【图形图像-1】SDF

在图形图像处理中&#xff0c;SDF&#xff08;Signed Distance Field&#xff0c;带符号的距离场&#xff09;是一种表示图形轮廓和空间距离的数学结构。它通常用于计算机图形学、文本渲染、碰撞检测和物理模拟等领域。 SDF&#xff08;Signed Distance Field&#xff0c;带符号…

《中国数据库前世今生》观影——认识1980年起步阶段

引出 中国数据库的前世今生观影——认识1980年的起步阶段 20 世纪 60 年代国外就有了商业数据库&#xff0c;20 世纪 80 年代我国才有了第一批数据库专业人才。不要小看这 20 年的差距&#xff0c;它可能需要几代数据库人用一生去追。2024 年了&#xff0c;中国跨过数据库这座大…

搞DDR你必须得看看我的这篇笔记

Hi! 这篇约你一起深入认识一下DDR。 文章目录 DDR基础DDR是什么?DDR有什么用?为什么要用DDRDDR协议是如何演进的如何访问DDRDDR关键时序参数ACTIVATE Timing 激活时序REFRESH Timing 刷新时序READ Timing 读时序写时序模式寄存器时序DDR基础 DDR是什么? 如果你在学生时代自…

动态创建标签jQuery效果

动态创建标签jQuery效果https://www.bootstrapmb.com/item/14832 使用jQuery来动态创建HTML标签并添加效果是一种常见的方法。以下是一个简单的示例&#xff0c;说明如何使用jQuery来动态创建<div>标签&#xff0c;并给它们添加一些基本的效果。 1. 创建一个新的<di…

3GPP眼中的XR及其技术特点

3GPP R18 支持了XR Services。XR需要高数据速率和低延迟通信&#xff0c;这也真是5G可以大展身手的地方。这篇就从3GPP的角度看下XR是什么以及XR有哪些技术特点。 Extended Reality (XR) 是指由计算机技术和可穿戴设备生成的所有现实与虚拟相结合的环境和人机交互技术。 实际上…

使用vscode搜索打开的文件夹下的文件

右键空白处打开命令面板 摁一次删除键&#xff0c;删除掉图中的大于号 这样就能够找到例化的模块&#xff0c;文件具体在哪个位置&#xff0c;然后打开了

python实现责任链模式

把多个处理方法串成一个list。下一个list的节点是上一个list的属性。 每个节点都有判断是否能处理当前数据的方法。能处理&#xff0c;则直接处理&#xff0c;不能处理则调用下一个节点&#xff08;也就是当前节点的属性&#xff09;来进行处理。 Python 实现责任链模式&#…

常用的自动化测试工具有哪些?

什么是自动化测试&#xff1f;简单来说&#xff0c;自动化测试就是通过重复执行预定义的动作来执行测试用例的系统来代替人工操作。为了充分利用自动化&#xff0c;必须选择正确的自动化测试工具。 一、自动化测试工具有哪些 1、Selenium WEB自动化测试 Selenium是网页应用中最…

BUUCTF [MRCTF2020]Ezpop

这道题对于刚接触到pop链的我直接把我整懵了&#xff0c;一边看着魔术方法一边分析 魔术方法可以看这里PHP 魔术方法 - 简介 - PHP 魔术方法 - 简单教程&#xff0c;简单编程 (twle.cn) 代码解析 经过以上的分析我们可以理一下解题思路&#xff1a;接收参数反序列化之前先触发…

03 capture软件操作界面和常用设置介绍04 capture软件自带元件库设置

03 capture软件操作界面和常用设置介绍&&04 capture软件自带元件库设置 第一部分 03 capture软件操作界面和常用设置介绍一、分辨率二、产品选择三、颜色设置四、格点设置 第二部分 04 capture软件自带元件库设置 第一部分 03 capture软件操作界面和常用设置介绍 一、…

Python | Leetcode Python题解之第278题第一个错误的版本

题目&#xff1a; 题解&#xff1a; # The isBadVersion API is already defined for you. # def isBadVersion(version: int) -> bool:class Solution:def firstBadVersion(self, n: int) -> int:left, right 1, nwhile left < right:mid left (right - left) //…

uboot的mmc partconf命令

文章目录 命令格式参数解释具体命令解释总结 mmc partconf 是一个用于配置 MMC (MultiMediaCard) 分区的 U-Boot 命令。具体来说&#xff0c;这个命令允许你设置或读取 MMC 卡的分区配置参数。让我们详细解释一下 mmc partconf 0 0 1 0 命令的含义。 命令格式 mmc partconf &…

力扣高频SQL 50题(基础版)第七题

文章目录 力扣高频SQL 50题&#xff08;基础版&#xff09;第七题1068. 产品销售分析 I题目说明思路分析实现过程准备数据&#xff1a;实现方式&#xff1a;结果截图:总结&#xff1a; 力扣高频SQL 50题&#xff08;基础版&#xff09;第七题 1068. 产品销售分析 I 题目说明 …

大模型额外篇章三:vercel搭建openai中转服务器

文章目录 一、起因和注意1)起因2)注意二、实现方法(原理:透传)1)nginx方案2)node服务3)纯 js 方案4)选择国外的域名服务商(DNS 解析路径缩短,建议方案国外提供 CDN 云服务商结合自建云服务业务做负载均衡)三、实践(vercel部署OpenAI代理服务器)四、测试搭建的Ope…

微前端--qiankun

qiankun qiankun分为accpication和parcel模式。 aplication模式基于路由工作&#xff0c;将应用分为两类&#xff0c;基座应用和子应用&#xff0c;基座应用维护路由注册表&#xff0c;根据路由的变化来切换子应用。子应用是一个独立的应用&#xff0c;需要提供生命周期方法供…

【中项】系统集成项目管理工程师-第5章 软件工程-5.4软件实现

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…

51单片机嵌入式开发:14、STC89C52RC 之HX1838红外解码NEC+数码管+串口打印+LED显示

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 STC89C52RC 之HX1838红外解码NEC数码管串口打印LED显示 STC89C52RC 之HX1838红外解码NEC数码管串口打印LED显示1 概述2 硬件电路2.1 遥控器2.2 红外接收器电路2.3 STC89C52单…