当前位置: 首页 > news >正文

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.lryc.cn/news/225193.html

相关文章:

  • 能源监测管理系统有哪些作用与效果?
  • 数据分析是什么?
  • 【kafka】Java客户端代码demo:自动异步提交、手动同步提交及提交颗粒度、动态负载均衡
  • 【Git】Gui图形化管理、SSH协议私库集成IDEA使用
  • AIX5.3安装weblogic10.3
  • 聊聊logback的FixedWindowRollingPolicy
  • 详解机器学习最优化算法
  • 文件缓存的读写
  • Debian 修改主机名
  • 多线程返回计时问题代码案例
  • 【STM32】STM32的Cube和HAL生态
  • 汇编-EQU伪指令(数值替换)
  • 超声波俱乐部分享:Enter AI native application
  • 软件测试项目实战经验附视频以及源码【商城项目,app项目,电商项目,银行项目,医药项目,金融项目】(web+app+h5+小程序)
  • HarmonyOS应用开发-ArkTS基础知识
  • mybatis嵌套查询子集合只有一条数据
  • Github 生成SSH秘钥及相关问题
  • STM32外设系列—MPU6050角度传感器
  • 网站小程序分类目录网源码系统+会员登录注册功能 带完整搭建教程
  • 【Linux网络】手把手实操Linux系统网络服务DHCP
  • Huggingface网页解析和下载爬虫
  • C# Winform 自定义带SWITCH的卡片
  • 我用Devchat开发了公务员报名确认系统自动登录脚本,再也不用担心挤不进去了
  • 如何低门槛开发有趣实用的ZigBee产品?
  • ChatGPT和API发生重大中断!
  • SQL第五次上机实验
  • Matplotlib数据可视化综合应用Matplotlib图形配置在线闯关_头歌实践教学平台
  • CSS实现瀑布流的两种方式
  • Hadoop 视频分析系统
  • Flutter android和ios闪屏页配置