uniapp使用vue

news2024/12/25 9:08:14

uniapp集成了Vuex,,并不需要安装vuex

  • 定义自己的vuex

vuex中独立命名空间: 可以在模块中使用 namespaced 属性,设置为 true,,这样做的好处是,,不同模块之间的state,mutations,actions,getters,,不会冲突,,可以更好的组织和管理代码

创建一个vuex的模块

const STORAGE_KEY ="search-list"

export default {
	
	
	
	// 独立命名空间
	namespaced:true,
	state:()=>{
		return {
			msg:"hello vuex",
			searchData:uni.getStorageSync(STORAGE_KEY) || [], // 搜索历史的数据
		}
	},
	mutations:{
		/**
		 * 存入本地
		 */
		saveToStorage(state){
			uni.setStorage({
				key:STORAGE_KEY,
				data:state.searchData
			})
		},
		/**
		 * 添加历史搜索记录
		 */
		addSearchData(state,val){
			if(!val  || val.trim()===""){
				return
			}
			let index = state.searchData.findIndex(item=>item===val)
			if(index !== -1){
				state.searchData.splice(index,1)
			}
			state.searchData.unshift(val)
			
			
			this.commit("search/saveToStorage")
		},
		/**
		 * 删除指定的 history-list
		 */
		removeSearchData(state,index){
			state.searchData.splice(index,1)
			
			this.commit("search/saveToStorage")
		},
		/**
		 * 清空历史
		 */
		removeAllSearchData(state){
			state.searchData = []
			
			this.commit("search/saveToStorage")
		}
	}
}

创建vuex的js文件:

import Vue from 'vue'
import Vuex from "vuex"

import search from "./modules/search.js"


Vue.use(Vuex)

const store = new Vuex.Store({
	
	modules:{
		search
	}
})



export default store;

在main.js引入vuex:

在这里插入图片描述

  • 使用vuex:
    this.$store.state.模块名.变量

mapStatemapMutations 是vuex提供的辅助函数,用于简化在组件中获取state和mutations的操作,,
mapState 将数组中的内容,生成计算属性:

computed:{
	...mapState(['msg','searchData'])
}

如果有模块,并且使用了命名空间,,的话,,通过传入模块的名字来映射状态:

computed:{
	...mapState(模块名字,['msg','searchData'])
}
...mapMutations("search",["removeSearchData","removeAllSearchData"]),

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

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

相关文章

电商库存随笔

好多年没有来写东西了,忙成狗,最近闲暇,有点时间,随手写一下之前的项目中的小点; 一方面是做个总结,一方面打发一下时间 出库 库存扣减时机 下单扣减 [生成订单]付款扣减预扣库存(实际使用) 预扣库存 并…

运营商大数据精准获客:我们提供精准客源渠道的最大资源体?

运营商大数据精准营销 谈起精准获客,竞争对手永远是为我们提供精准客源渠道的最大资源体! 最新的获客方式,就是从竞争对手的手中把他们的精准客户资源变为自己的。 今年最火的运营商大数据精准营销是拒绝传统营销方式的烧钱推广&#xff0…

Nginx缓存基础

1 nginx缓存的流程 客户端需要访问服务器的数据时,如果都直接向服务器发送请求,服务器接收过多的请求,压力会比较大,也比较耗时;而如果在nginx缓存一定的数据,使客户端向基于nginx的代理服务器发送请求&…

ChatGPT - 在ChatGPT中设置通用提示模板

文章目录 Prompt设置验证 Prompt VERBOSITY: 我可能会使用 V[0-3] 来定义代码的详细程度:V0 简洁明了 V1 简练 V2 详细 V3 非常详细,附有例子助理回应 您是用户问题背景下的主题专家。我们一步一步来:除非您只是回答一个简短的问题&#xff…

Confluence 漏洞复现(CVE-2023-22515)

Confluence 漏洞复现(CVE-2023-22515,CVE-2023-22518) 1.CVE-2023-22515权限提升漏洞 1.1漏洞描述 Confluence近期推出的严重漏洞cve-2023-22515,由于未授权和xwork框架问题,导致攻击者可以未授权将系统设置为未安装…

分布式事务的华丽进化

说到分布式事务,大家并不陌生。之前我已做过相关的总结(连接附本文后面),不过比较偏理论。在实际工作中,用得比较多的还是柔性分布式事务,今天主要把在工作中运用到的几种柔性分布式事务的场景及实现方式做…

使用nginx作为图片服务器

第一步: 下载nginx版本,去官网下载,这里不建议下载最新版本,因为有时候最新版本还不太稳定。 nginx下载地址官网:nginx: download,然后把下载好的安装包解压出来。 第二步: 在nginx目录下载创建…

在新的服务器上成功安装mysqlclient的方法【解决No matching distribution found for mysqlclient的问题】

前言:在某台Centos服务器上安装mysqlclient时一直报下面的错: WARNING: Discarding https://mirrors.aliyun.com/pypi/packages/6a/91/bdfe808fb5dc99a5f65833b370818161b77ef6d1e19b488e4c146ab615aa/mysqlclient-1.3.0.tar.gz#sha25606eb5664e3738b28…

【2】Spring Boot 3 项目搭建

目录 【2】Spring Boot 3 初始项目搭建项目生成1. 使用IDEA商业版创建2. 使用官方start脚手架创建 配置与启动Git版本控制 个人主页: 【⭐️个人主页】 需要您的【💖 点赞关注】支持 💯 【2】Spring Boot 3 初始项目搭建 项目生成 1. 使用IDEA商业版创…

[sd_scripts]之config

https://github.com/kohya-ss/sd-scripts/blob/main/docs/config_README-ja.mdhttps://github.com/kohya-ss/sd-scripts/blob/main/docs/config_README-ja.md[Stable Diffusion]训练你的LoRA(Linux) - 知乎简介LoRA 是一种参数高效微调方法(PEFT)&#x…

原型链污染漏洞

想要很清楚了理解原型链污染我们首先必须要弄清楚原型链这个概念 可以看这篇文章:对象的继承和原型链 目录 prototype和__proto__分别是什么? 原型链继承 原型链污染是什么 哪些情况下原型链会被污染? 例题1:Code-Breaking 2…

软件测试|PO设计模式在 UI 自动化中的实践

PO的思想最早是2013年由IT大佬Martin Flower提出的:https://martinfowler.com/bliki/PageObject.html 没错,就是他 — 没错,就是他 — 在他的文章里有这样一张经典样图,图片中展示了测试代码中直接操作HTML元素和使用PO模式将page对象封装成…

Android JVM内存模型——老生常谈

jvm简介 JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。 jvm作用 Java中的所有类,必须…

Web自动化测试入门篇详解

一、目的 web自动化测试作为软件自动化测试领域中绕不过去的一个“香饽饽”,通常都会作为广大测试从业者的首选学习对象,相较于C/S架构的自动化来说,B/S有着其无法忽视的诸多优势,从行业发展趋、研发模式特点、测试工具支持&…

阿里云e实例服务器3M固定带宽40G ESSD entry系统盘99元/年

阿里云99元服务器新老用户均可以买,你没看错,老用户可以买,活动页面 aliyunfuwuqi.com/go/aliyun 配置为云服务器ECS经济型e实例、2核2G、3M固定带宽、40G ESSD Entry云盘,并且续费不涨价,原价99元即可续费&#xff0c…

阿里云99元服务器40G ESSD Entry云盘、2核2G3M带宽配置

阿里云99元服务器新老用户均可以买,你没看错,老用户可以买,活动页面 aliyunfuwuqi.com/go/aliyun 配置为云服务器ECS经济型e实例、2核2G、3M固定带宽、40G ESSD Entry云盘,并且续费不涨价,原价99元即可续费&#xff0c…

学之思项目的搭建部署 打jar包失败的解决方法

学之思系统介绍部署java环境安装maven安装node.js前端打包工具命令npmGit命令获取源代码安装配置mysql前端打包打包jar包服务上线!!!打jar包失败的解决方法 学之思系统介绍 学之思开源考试系统是一款 java vue 的前后端不分离的考试系统。主要优点是开发、部署简单快捷、界面…

咖啡机、电热水壶、豆浆机上架亚马逊美国站UL1082认证标准

咖啡机、电热水壶、豆浆机UL1082报告亚马逊美国站,UL1082标准是指室内用的,咖啡机、电热水壶、豆浆机以及滴落式类加热产品的标准。UL标准是美国的检测标准,目前跨境电商亚马逊美国站需要商家提供产品的UL报告,其中UL1082报告就是…

centos配置docker环境

CentOS系统更换软件安装源 yum默认链接的还是国外的镜像,速度相对不理想,配置成国内的镜像会快很多,这里以阿里镜像为例进行配置: 首先进行更新: yum updatebase源 第一步:备份你的原镜像文件,以免出错后…

常孝元宇宙·《神由都城》首场招商会圆满举办

11月4日,常孝元宇宙《神由都城》首场招商会在常州中华孝道园召开。《神由都城》招商会面向所有合伙人,全面展现常孝股份元宇宙得天独厚的线上线下相结合的模式、广阔的发展空间和优质的运营环境,以一场高规格的招商盛会,吹响常孝股份全面推进元宇宙高质量发展的奋进号角。 招商…