uniapp使用vue

news/2024/10/25 13:21:53/

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.ppmy.cn/news/1207872.html

相关文章

Kotlin库实现多线程爬取数据

由于字数限制,以下是一个简化版的爬虫程序示例,使用了Kotlin的网络库kotlinx.coroutines和kotlinx.html。这个程序会爬取一个简单的Python多线程跑数据的网页,并打印出结果。 import kotlinx.coroutines.* import kotlinx.html.* import java…

android手机平板拓展电脑音频

(1)首先确保电脑上有声卡,就是电脑右下角小喇叭能调音量,不管电脑会不会响,如果小喇叭标记了个错误,说明没有声卡,安装图上的虚拟声卡软件。 (2)图上第一个PC免安装及局…

http之basic authentication浅析

1、客户端发请求:GET /registry/a.jpg HTTP/1.1 2、服务器:这个资源在安全区harbor-registry-basic-realm里,是受限资源,需要基本认证。于是返回了401,并且携带了Header: Www-Authenticate: Basic realm&…

assimp中如何判断矩阵是否是单位矩阵

对于一个矩阵元素为浮点型的矩阵&#xff0c;你是否还在使每个元素跟1.0f或0.0f进行比较&#xff0c;如果这样&#xff0c;只能说你的结果不一定正确&#xff0c;那我们看看assimp中是如何做的。 template <typename TReal> AI_FORCE_INLINE bool aiMatrix4x4t<TReal…

【Redis】list常用命令内部编码使用场景

文章目录 前置知识列表类型的特点 命令LPUSHLPUSHXRPUSHRPUSHXLRANGELPOPRPOPLINDEXLREMLINSERTLTRIMLSETLLEN 阻塞版本命令BLPOPBRPOP 命令总结内部编码测试内部编码 使用场景消息队列分频道的消息队列 模拟栈和队列 前置知识 列表类型是⽤来存储多个有序的字符串&#xff0c…

SAM + 用于文本到图像修复的稳定扩散

推荐基于稳定扩散(stable diffusion) AI 模型开发的自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 - NSDT 什么是SAM&#xff1f; 今年早些时候&#xff0c;Meta AI 发布了新的开源项目&#xff1a;Segment Anything Model &#xff08;SAM&#xff09;&#xff…

哪些人更容易受到网络攻击?

当下&#xff0c;企业的安全已从传统的外部网络安全威胁防御&#xff0c;逐渐延伸到内部威胁防御。很多时候IT基础设施被攻陷不是外部造成&#xff0c;而是内部使然&#xff0c;这些内部威胁要复杂得多且难以管理。那么&#xff0c;哪些员工最脆弱、最有可能给企业组织带来网络…

黑豹程序员-SpringBoot中整合knife4j接口文档

1、Knife介绍 黑豹程序员-架构师学习路线图-百科&#xff1a;Knife4j API接口文档管理 2、坐标 <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version>2.0.7</version&…