位置: 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手机版伪静态教程(织梦手机端)

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

  • 铃声在哪里设置(微信换铃声在哪里设置)

    铃声在哪里设置(微信换铃声在哪里设置)

  • u盘速度一会快一会为0(u盘速度一会快一会慢一会为0)

    u盘速度一会快一会为0(u盘速度一会快一会慢一会为0)

  • plc全称是什么意思(plc全称发音)

    plc全称是什么意思(plc全称发音)

  • qq号可以查到什么(qq号能查到什么)

    qq号可以查到什么(qq号能查到什么)

  • 淘宝店铺装修分为哪几个模块(淘宝店铺装修分为几部分)

    淘宝店铺装修分为哪几个模块(淘宝店铺装修分为几部分)

  • 新手机有轻微划痕正常吗(新手机有轻微划痕能退吗)

    新手机有轻微划痕正常吗(新手机有轻微划痕能退吗)

  • 处于s模式的windows10什么意思(处于s模式的windows10家庭版)

    处于s模式的windows10什么意思(处于s模式的windows10家庭版)

  • 腾讯超前点播如何开通(腾讯超前点播如何微信支付)

    腾讯超前点播如何开通(腾讯超前点播如何微信支付)

  • 微信视频一发出来就感叹号(微信视频一发出就中断,对方能看到吗)

    微信视频一发出来就感叹号(微信视频一发出就中断,对方能看到吗)

  • 华为nova6解锁方式(华为手机nova6怎么解锁)

    华为nova6解锁方式(华为手机nova6怎么解锁)

  • 平板充电口坏了怎么修(平板充电口坏了修一下要多久)

    平板充电口坏了怎么修(平板充电口坏了修一下要多久)

  • 华为手机关闭高清通话(华为手机关闭高清通话无法接听电话)

    华为手机关闭高清通话(华为手机关闭高清通话无法接听电话)

  • qq音乐异地登录是被盗号了吗(qq音乐异地登录不上去怎么办)

    qq音乐异地登录是被盗号了吗(qq音乐异地登录不上去怎么办)

  • iphone11应用加密怎么设置(苹果11应用加密码)

    iphone11应用加密怎么设置(苹果11应用加密码)

  • 华为nova2plus是什么时候上市的(华为nova2plus是什么意思)

    华为nova2plus是什么时候上市的(华为nova2plus是什么意思)

  • 华为全面屏手机有哪些(华为全面屏手机怎么调出三个键)

    华为全面屏手机有哪些(华为全面屏手机怎么调出三个键)

  • 京东红包过期了能恢复吗?(京东红包过期了怎么办)

    京东红包过期了能恢复吗?(京东红包过期了怎么办)

  • 添加脚注在哪里(怎么添加脚注)

    添加脚注在哪里(怎么添加脚注)

  • 剪映怎么使用本地音乐(剪映怎么使用本地音频)

    剪映怎么使用本地音乐(剪映怎么使用本地音频)

  • 快手b类封号影响上热门吗(快手违规b类禁封一天然后就降权了多久账号恢复呢)

    快手b类封号影响上热门吗(快手违规b类禁封一天然后就降权了多久账号恢复呢)

  • 对于<router-view>标签的理解(对于异步电动机国家标准规定3kw)

    对于<router-view>标签的理解(对于异步电动机国家标准规定3kw)

  • 用JavaScript实现文件的上传与下载(javascript编写程序)

    用JavaScript实现文件的上传与下载(javascript编写程序)

  • 小规模纳税人应交税费的二级科目
  • 残疾人个人所得税
  • 收到房租费发票如何做账
  • 自己申报个人所得税需要补缴,必须自己申报自己补缴吗
  • 工业企业销售成本如何计算
  • 母公司投资子公司现金流量表抵消
  • 公允价值变动损益属于当期损益吗
  • 无形资产账面价值和可收回金额孰低摊销吗
  • 工商不变新股东是什么
  • 计提坏账准备,坏账准备是增加还是减少
  • 增值税发票税率是星号
  • 超市预付卡开票内容
  • 印花税核定表申请
  • 采购合同清单的安装调试费如何开具发票?税率是多少
  • 个税零申报工资填0吗
  • 折价处置抵押房地产的应当参照什么
  • 开具房租发票备注多少
  • 电脑网页密码不正确
  • 运费用会计分录
  • 协调费用应该怎么表述才合理
  • 筹建期间费用计入什么
  • 外购产品视同自产产品办理免抵退税的条件有哪几种
  • Madonna della Corona教堂,意大利 (© Volodymyr Kalyniuk/Alamy)
  • 我国中小企业成本管理现状
  • php常用设计模式有哪些
  • 企业应交税费的会计分录
  • 增值税待认证进项税额
  • 职工福利费入账依据
  • 玻璃深加工企业排名
  • 深入分析php优化模型
  • 小程序从入门到精通
  • 公司的一项专利多少钱
  • 研发费用加计扣除2022政策
  • 小规模收到成本发票分录
  • mongodb 安装
  • 深圳增值税普通发票和专用发票的区别
  • 小规模纳税人防水工程专用发票税率是多少
  • 矿产资源补偿费计入管理费用吗
  • 企业无形资产要摊销吗
  • 未分配利润是怎么来的
  • 资产的计税基础通俗理解
  • 租赁期间因占有、使用租赁物获得的收益
  • 合伙企业是否需要缴纳印花税
  • 科研专用费是什么
  • 房产税怎么实行
  • 应收账款增加给哪一方
  • 利润总额是负数怎么计算利润率
  • 收到银行退回的手续费怎么做会计分录
  • 经营性现金流量三种算法
  • 实收资本印花税属于什么税目
  • 税盘不缴费会怎么样
  • 公司缴纳社保如何转为个人缴纳
  • 事业单位装修费账务处理
  • 单位固定资产统计表
  • 个体私营企业有哪些
  • sqlserver多表查询怎么加索引
  • debian系统如何安装软件
  • win10 version 1607 累积更新失败卡了怎么办
  • win8切换管理员账户
  • centos基本操作命令
  • 怎么降到windows7
  • win10打不开应用市场
  • cocos2dx 教程
  • js显示时间并且之后秒数实时更新
  • windows下载安装
  • linux shell脚本教程
  • python爬取app数据违法吗
  • node.js入门
  • jquery dom对象
  • 如何用jquery
  • Unity GameObject.activeSelf, GameObject.activeInHierarchy,GameObject.SetActive和SetActiveRecursively
  • python中函数参数类型
  • 湖南省电子税务局登录
  • 浙江公务员冬令时上班时间
  • 北京四合院为什么出名那么多
  • 有限合伙企业怎么交税
  • 月收入不足1000
  • 发票是去国税还是地税
  • 郑州高新税务局
  • 深化财税体制改革完善税收制度心得体会
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设