位置: IT常识 - 正文

Vuex(vuex数据持久化)

编辑:rootadmin
Vuex 1.概念 ​ 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。 我们先来看看用全局事件总线实现多组件共享数据的方式: vuex实现 2.vuex原理图 3.何时使用? ​ 多 ... Vuex1.概念

推荐整理分享Vuex(vuex数据持久化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuex详解和用法,vue下载,vuex是什么,vuex是什么,vuex的五个属性及使用方法,vuex和pinia的区别,vuex和pinia的区别,vuex详解和用法,内容如对您有帮助,希望把文章链接给更多的朋友!

​在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。

我们先来看看用全局事件总线实现多组件共享数据的方式:

vuex实现

2.vuex原理图

3.何时使用?

​多个组件需要共享数据时

4.搭建vuex环境安装vuex

npm i vuex@3

创建文件:src/store/index.js该文件用于创建vuex中最为核心的store

//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备actions对象——用于响应组件中用户的动作const actions = {}//准备mutations对象——用于修改state中的数据const mutations = {}//准备state对象——用于保存具体的数据const state = {}//创建并暴露storeexport default new Vuex.Store({actions,mutations,state})

在main.js中创建vm时传入store配置项

......//引入storeimport store from './store'......//创建vmnew Vue({el:'#app',render: h => h(App),store})5.基本使用

初始化数据、配置actions、配置mutations,操作文件store.js

//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//引用VuexVue.use(Vuex)const actions = { //响应组件中加的动作jia(context,value){// console.log('actions中的jia被调用了',miniStore,value)context.commit('JIA',value)},}const mutations = { //执行加JIA(state,value){// console.log('mutations中的JIA被调用了',state,value)state.sum += value}}//初始化数据const state = { sum:0}//创建并暴露storeexport default new Vuex.Store({actions,mutations,state,})

组件中读取vuex中的数据:$store.state.sum

组件中修改vuex中的数据:this.$store.dispatch('action中的方法名',数据) 或 this.$store.commit('mutations中的方法名',数据)

Vuex(vuex数据持久化)

备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit

6.getters的使用

概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。

在store.js中追加getters配置

......const getters = { // bigSum有一个参数就是statebigSum(state){return state.sum * 10 // 返回什么bigSum就是什么值}}//创建并暴露storeexport default new Vuex.Store({......getters})

组件中读取数据:$store.getters.bigSum

7.四个map方法的使用

导入四个mapimport {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

mapState方法:用于帮助我们映射state中的数据为计算属性

computed: { //借助mapState生成计算属性:sum、school、subject(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性:sum、school、subject(数组写法) ...mapState(['sum','school','subject']),},

mapGetters方法:用于帮助我们映射getters中的数据为计算属性

computed: { //借助mapGetters生成计算属性:bigSum(对象写法) ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性:bigSum(数组写法) ...mapGetters(['bigSum'])},

mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数

methods:{ //靠mapActions生成:incrementOdd、incrementWait(对象形式) ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成:incrementOdd、incrementWait(数组形式) ...mapActions(['jiaOdd','jiaWait'])}

mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

methods:{ //靠mapActions生成:increment、decrement(对象形式) ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成:JIA、JIAN(对象形式) ...mapMutations(['JIA','JIAN']),}

备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。

8.模块化+命名空间

目的:让代码更好维护,让多种数据分类更加明确。

修改store.js

const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } }}const personAbout = { namespaced:true,//开启命名空间 state:{ ... }, mutations: { ... }, actions: { ... }}const store = new Vuex.Store({ modules: { countAbout, personAbout }})

开启命名空间后,组件中读取state数据:

//方式一:自己直接读取this.$store.state.personAbout.list//方式二:借助mapState读取:...mapState('countAbout',['sum','school','subject']),

开启命名空间后,组件中读取getters数据:

//方式一:自己直接读取this.$store.getters['personAbout/firstPersonName']//方式二:借助mapGetters读取:...mapGetters('countAbout',['bigSum'])

开启命名空间后,组件中调用dispatch

//方式一:自己直接dispatchthis.$store.dispatch('personAbout/addPersonWang',person)//方式二:借助mapActions:...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后,组件中调用commit

//方式一:自己直接committhis.$store.commit('personAbout/ADD_PERSON',person)//方式二:借助mapMutations:...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
本文链接地址:https://www.jiuchutong.com/zhishi/313384.html 转载请保留说明!

上一篇:织梦dedecms手机版伪静态教程(织梦手机端)

下一篇:公司员工私车公用如何做会计分录?(公司员工私车公用协议)

  • 查看ip命令

    查看ip命令

  • 钉钉清除聊天记录还可以恢复吗(钉钉清除聊天记录云端还有吗)

    钉钉清除聊天记录还可以恢复吗(钉钉清除聊天记录云端还有吗)

  • 苹果定位找不到对方位置是怎么回事(苹果定位找不到位置在线什么意思)

    苹果定位找不到对方位置是怎么回事(苹果定位找不到位置在线什么意思)

  • 华为nova7se的se是什么意思(华为huawei nova 7se的se是什么意思)

    华为nova7se的se是什么意思(华为huawei nova 7se的se是什么意思)

  • 抖音等级有什么用(抖音等级有什么方法升的快)

    抖音等级有什么用(抖音等级有什么方法升的快)

  • 手机音质沙哑怎么调整(手机声音很沙哑)

    手机音质沙哑怎么调整(手机声音很沙哑)

  • 无需验证加微信对方知道吗(无需验证加微信的软件)

    无需验证加微信对方知道吗(无需验证加微信的软件)

  • 京东是什么模式(京东是什么模式b2c)

    京东是什么模式(京东是什么模式b2c)

  • ios11有语音控制吗(苹果11打开语音控制)

    ios11有语音控制吗(苹果11打开语音控制)

  • wifi静态什么意思(wifi 静态)

    wifi静态什么意思(wifi 静态)

  • 为什么苹果xr屏幕亮度有时候会自动暗下来(为什么苹果xr屏幕点不开)

    为什么苹果xr屏幕亮度有时候会自动暗下来(为什么苹果xr屏幕点不开)

  • 苹果11首次充电充多久(苹果11首次充电需要关机吗)

    苹果11首次充电充多久(苹果11首次充电需要关机吗)

  • 苹果手表3可以看视频吗(苹果手表3可以和苹果12配对吗)

    苹果手表3可以看视频吗(苹果手表3可以和苹果12配对吗)

  • oppor15录屏功能在哪(oppor15录制屏幕在哪)

    oppor15录屏功能在哪(oppor15录制屏幕在哪)

  • iphonex多长机身(iphonex机身有多长)

    iphonex多长机身(iphonex机身有多长)

  • 淘宝怎么绑定身份证(淘宝怎么绑定身份证实名认证)

    淘宝怎么绑定身份证(淘宝怎么绑定身份证实名认证)

  • 苹果手机信号1x怎么解决(苹果显示1x怎么修复)

    苹果手机信号1x怎么解决(苹果显示1x怎么修复)

  • 荣耀9x最高支持多少w快充(荣耀9x最高支持多少w)

    荣耀9x最高支持多少w快充(荣耀9x最高支持多少w)

  • 用户画像是通过cookie统计的吗(用户画像原理)

    用户画像是通过cookie统计的吗(用户画像原理)

  • 如何取消qq消息弹窗(如何取消qq消息提示音分组)

    如何取消qq消息弹窗(如何取消qq消息提示音分组)

  • 爱奇艺自媒体怎么申请(爱奇艺自媒体怎么注册)

    爱奇艺自媒体怎么申请(爱奇艺自媒体怎么注册)

  • 微信电话怎么看谁挂的(微信电话怎么看是谁先挂的)

    微信电话怎么看谁挂的(微信电话怎么看是谁先挂的)

  • iphone新手机怎么同步旧手机(iphone新手机怎么充电对电池好)

    iphone新手机怎么同步旧手机(iphone新手机怎么充电对电池好)

  • 除了电脑杀毒软件能清理电脑垃圾,还有其他方式?(除了电脑杀毒软件还有啥)

    除了电脑杀毒软件能清理电脑垃圾,还有其他方式?(除了电脑杀毒软件还有啥)

  • 基于Pytorch实现的EcapaTdnn声纹识别模型(pytorch基础)

    基于Pytorch实现的EcapaTdnn声纹识别模型(pytorch基础)

  • Transformer框架时间序列模型Informer内容与代码解读(transform模块)

    Transformer框架时间序列模型Informer内容与代码解读(transform模块)

  • 如何在最新版本宝塔Linux面板 7.9.4安装 Swoole Loader 扩展傻瓜化教程-OK源码中国(如何在最新版本钉钉上使用支付审申请)

    如何在最新版本宝塔Linux面板 7.9.4安装 Swoole Loader 扩展傻瓜化教程-OK源码中国(如何在最新版本钉钉上使用支付审申请)

  • 金税三期收入额是多少
  • 车辆消费税征税范围是什么
  • 超市小票能否入库
  • 免税农产品发票需要勾选吗
  • 个人生产经营所得税计算器
  • 代扣代缴增值税纳税义务发生时间
  • 已经认证的发票红冲发票需要收回原发票吗
  • 公司收承兑贴现的会计分录
  • 固定资产折旧提完了之后还要怎么处理吗
  • 事业单位借款怎么做账
  • 工资条迟到扣款
  • 地税有哪些税种类型
  • 当月认证的发票可以当月抵扣吗
  • 加计扣除农产品包括哪些
  • 小规模纳税人增值税超过30万怎么纳税
  • 报销话费属于什么费用
  • 三代税款手续费是什么意思
  • 应付政府补贴款名词解释
  • 非居民企业怎么算企业所得税
  • 增值税发票和收据的区别
  • 非流动资产基金对应哪个会计科目
  • 怎样找此电脑
  • 苹果iphone6s plus打电话没有人名
  • 信息化生产力是指什么
  • 事业单位采购管理办法
  • 坏账损失的确定原则
  • rtvscn95.exe - rtvscn95是什么进程 有什么用
  • win10显示我的电脑
  • php教程 csdn
  • PHP:iconv_mime_decode_headers()的用法_iconv函数
  • 设备租赁费属于固定成本吗
  • 怎么核算购进商品
  • 支付临时工的工资怎么做账
  • 生产型企业出口退税退的是哪部分的税
  • php读取文件
  • 落日时光
  • 微信小程序如何删除
  • java编程入门基础教程
  • php二维数组foreach
  • php实现微信支付功能
  • php多维数组合并相同key
  • 收到境外服务费可以退税吗
  • excel&命令
  • 织梦使用教程
  • 4s店除了卖车还有什么
  • 自然人独资和个人独资是一样的吗
  • 用友t3系统功能怎么用
  • 什么是企业会计确认计量和报告的空间范围
  • Sql Server 2005的1433端口打开局域网访问和进行远程连接
  • 已付预付款当月怎么入账
  • 商标注册费2000元记哪个科目
  • 固定资产盘亏如何做账务处理
  • 研发费用如何做账
  • 用信用卡消费扣谁的手续费
  • 年度投资额看哪个科目
  • 金蝶如何删除结转损益的凭证
  • 新单位建账怎么做
  • 商业企业库存商品
  • 数据库sql分组
  • linux系统输入法锁定了怎么解开
  • win7任务栏颜色怎么改成蓝色
  • 删除文件或文件夹时出错怎么办
  • 圣诞老人现在在干嘛
  • Win10怎么更换主题
  • 使用shell脚本实现自动化软件部署
  • win10自带终端
  • qt绘制3d
  • nodejs怎么下载其他版本
  • 如何大小写字母转换
  • vue中的echarts
  • 关于Python的lambda函数,以下选项
  • 浅谈如何培养孩子的注意力
  • c#中的数组
  • javascript中array数组对象的含义及常用方法
  • 粮食购销企业税收服务
  • 税票是什么发票
  • 南京交税的标准2019
  • 众筹在中国的发展潜力
  • 河南网上报税流程图
  • 税务筹划前景
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设