uniapp使用vue

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.hqwc.cn/news/166895.html

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

相关文章

使用电脑上自带的软件进行远程连接

使用电脑上自带的软件进行远程连接 首先需要让你远程的电脑设置成允许远程连接 Windows R打开运行面板,然后输入sysdm.cpl命令,如下图: 选择“远程”选项卡,确保选中“允许远程连接到这台计算机”,如下图&#xff1…

【计算机网络】数据链路层-MAC和ARP协议

文章目录 1. 认识以太网2. MAC协议MAC帧的格式MAC地址和IP地址的区别MTU 3. 局域网通信原理碰撞检测和避免 4. ARP协议ARP数据报的格式ARP缓存 1. 认识以太网 网络层解决的是跨网络点到点传输的问题,数据链路层解决的是同一网络中的通信。 数据链路层负责在同一局域…

LeetCode【30. 串联所有单词的子串】

给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如,如果 words ["ab","cd","ef"], 那么 "abcdef&…

Java多线程的3种等待唤醒机制

Java多线程 3 种等待、唤醒机制 Object类中的wait、notify方法配置synchronized关键字;Condition接口中的await、signal方法配合Lock;LockSupport类中的park、unpark方法(无需锁) 一、Object类中的wait和notify方法实现线程的等…

阻容降压电阻应用

公式:Xc1/2πfC 电流:IU/Xc 举例:1uf金属化聚丙烯膜电容的容抗是3184欧姆。电流是70ma。 实际应用中根据工作电流去倒推算电容。

vue Sts认证后直传图片到阿里云OSS

后端进行sts认证生成临时身份凭证,前端通过凭证直传图片等文件到OSS中 一 OSS配置 增加用户和角色,创建OSS bucket 1.1 添加用户 登录阿里云管理控制台,右侧头像,进入访问控制 点击左侧导航栏的身份管理的用户,点击…

景联文科技助力金融机构强化身份验证,提供高质量人像采集服务

随着社会的数字化和智能化进程的加速,人像采集在金融机构身份认证领域中发挥重要作用,为人们的生活带来更多便利和安全保障。 金融机构在身份验证上的痛点主要包括以下方面: 身份盗用和欺诈风险:传统身份验证方式可能存在漏洞&am…

基于ssm的大学生社团管理系统

基于ssm的大学生社团管理系统 摘要 基于SSM的大学生社团管理系统是一个全面、高效的社团管理平台,旨在帮助大学生和社团管理员更方便、更快捷地进行社团活动的组织和管理。该系统基于Spring、SpringMVC和MyBatis(简称SSM)开发,这三…

理解RNN以及模型搭建代码

RNN结构 这是一张不直观易懂的RNN结构示意图。但也是大家见得最多结构示意图。 RNN模型解释 RNN一文就讲解清楚的博客,看这里:https://zhuanlan.zhihu.com/p/408998328 RNN为什么梯度消失和梯度爆炸,看这里:https://zhuanlan.z…

Unity Mirror学习(三)ClientRpc特性使用

ClientRpc特性 1,从服务端任意一网络对象发送到客户端 2,修饰方法的,在服务器上调用此方法,它将在所有客户端执行(我的理解:服务端广播消息,消息方法) 3,此方法不会在本地执行 它和…

计算机毕业设计 基于SpringBoot的私人西服定制系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

黑豹程序员-架构师学习路线图-百科:Knife4j API接口文档管理

文章目录 由来:接口文档第一代:Swagger第二代:Knife4j界面 由来:接口文档 古老编程是一个语言前后端通吃,ASP、JSP、PHP都是如此。 但随着项目规模变大,项目团队也开始壮大,岗位职责开始细分&a…