位置: IT常识 - 正文

【Vue】vuex-五个核心(vuex五个核心概念)

编辑:rootadmin
【Vue】vuex-五个核心

推荐整理分享【Vue】vuex-五个核心(vuex五个核心概念),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuex五大模块,vuex的五个,vuex的五个属性及使用方法,vuex的五个属性及使用方法,vuex包含几个部分,vuex的五个,vuex包含几个部分,vuex的五个,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭JS进阶 💨💨💨 💎接上一篇 Vue-条件,列表渲染-key的底层原理

vuexvuex1.什么是vuex2.什么时候用Vuex3.搭建vuex环境4.五个核心StateMutationActiongettersModules5.四个map方法的使用📢📢📢写在最后vuex1.什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

2.什么时候用Vuex多个组件依赖于同一状态.来自不同组件的行为需要变更同一状态.

Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

3.搭建vuex环境安装:npm install vuex@next --save创建文件: src/store/index.js// 引入Vue核心库import Vue from 'vue'// 引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备actions对象---响应组件中用户的动作const actions = {}//准备mutation对象---修改state中的数据const mutation = {}//准备state对象---保存具体的数据const state = {}// 创建并暴露storeexport default new Vuex.store({ actions, mutation, state})

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

......// 引入storeimport store from './store'......//创建vmnew Vue({ el: '#app', render: h => h(app), store})4.五个核心

基础使用:

初始化数据, 配置 action, 配置 mutations , 操作文件 store.js// 引入Vuex 核心库import Vue from 'vue'// 引入Vueximport Vuex from 'vuex'// 引用VuexVue.use(Vuex)const actions = { //响应组件中的动作 jia(context, value) { context.commit('JIA',value) }, jian(context, value) { context.commit('JIAN', value) }}const mutations = { //执行加 JIA(state, value) { state.sum += value }}// 初始化数据const state = { sum:0}//创建并暴露storeexport default new Vuex.Store({ actions, mutations, state})组件中读取vuex中的数据: $store.state.sum组件中修改vuex中的数据: $store.dispatch('action中的方法名', 数据) 或 $store.commit('mutation中的方法名', 数据)

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

State

用于初始化数据,提供唯一的公共数据源,所有共享的数据统一放到store的state进行储存,相似与data

【Vue】vuex-五个核心(vuex五个核心概念)

组件内通过 this.$store.state.count 访问到. HTML内通过 $store.state.count 访问到.

Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

mutations: { increment (state) { // 变更状态 state.count++ } }

调用 在组件中使用:this.$store.commit('increment') 提交载荷 : this.$store.commit('increment',10) 你可以向 store.commit 传入额外的参数,即 mutation 的载荷(payload), 参数可以是字符串也可以是对象. 对象风格的提交方式:

this.$store.commit({ type: 'increment', amount: 10})

注意::: mutation 必须是同步函数

Action

Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。

使用-参数 Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。 调用 在组件内 : this.$store.dispatch('increment')

// 以载荷形式分发this.$store.dispatch('incrementAsync', { amount: 10})// 以对象形式分发this.$store.dispatch({ type: 'incrementAsync', amount: 10})getters概念: 当state中的数据需要经过加工后在使用时, 可以使用getters加工.在 store.js 中追加 getters 配置......const getters = { bigSum(state){ return state.sum * 10 }}//创建并暴露storeexport default new Vuex.store({ ...... getters})组件中读取数据: $store.getters.bigSumModules目的: 让代码更好维护, 让多种数据分类更加明确.修改 store.jsconst countAbout = { namespaced:true, actions:{.....}, mutations:{.....}, state:{......}, getters:{...},}const personAbout = { namespaced:true, actions:{.....}, mutations:{.....}, state:{......}, getters:{...},}const store = new Vue.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'])开启命名空间后, 组件中调用dispath// 方式一: 自己直接dispaththis.$store.dispath('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'})5.四个map方法的使用

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

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

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

computed: {//借助mapGetters生成计算属性, bigSum (对象写法)...mapGetters({bigSum:'bigSum'}),//借助mapGetters生成计算属性, bigSum (数组写法)...mapGetters(['bigSum']),}**mapActions方法:**用于帮助我们生成与 action 对话的方法, 即 : 包含 $store.dispath(xxx) 的函数methods: { //靠mapActions生成, incrementOdd, incrementWait (对象形式) ...mapActions({incrementOdd:'jiaOdd', incrementWait:'jiaWait'}), //靠mapActions生成, incrementOdd, incrementWait (数组形式) ...mapActions(['jiaOdd','jiaWait']),}mapMutations方法: 用于帮助我们生成与 mutations 对话的方法, 即: 包含 $store.commit(xxx) 的函数methods: { //靠mapMutations生成, increment, decrement (对象形式) ...mapActions({increment:'JIA', decrement:'JIAN'}), //靠mapMutations生成, JIA,JIAN (数组形式) ...mapActions(['JIA','JIAN']),}📢📢📢写在最后

看到这里有没有收获什么呢?🎀🎀🎀

🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的

觉的博主写的不错的,可以给个一键三连lia~✨✨

本文链接地址:https://www.jiuchutong.com/zhishi/299157.html 转载请保留说明!

上一篇:使用element-ui中的el-upload自定义上传(elemental ui)

下一篇:前端三剑客常见面试题及其答案(前端v3)

  • dnf巫女加点攻略(dnf巫女加点)(dnf2021巫女加点)

    dnf巫女加点攻略(dnf巫女加点)(dnf2021巫女加点)

  • mate40是双卡的吗

    mate40是双卡的吗

  • oppo手机免打扰模式怎么取消(oppo手机免打扰模式别人打电话提示什么)

    oppo手机免打扰模式怎么取消(oppo手机免打扰模式别人打电话提示什么)

  • 怎样知道微信好友把你删了(怎样知道微信好友在不在线)

    怎样知道微信好友把你删了(怎样知道微信好友在不在线)

  • vivoy93是哪年的(vivoy93是哪年上市的)

    vivoy93是哪年的(vivoy93是哪年上市的)

  • 微信收款反应慢怎么办(微信收款反应慢如何解决)

    微信收款反应慢怎么办(微信收款反应慢如何解决)

  • 苹果手机证书过期(苹果手机证书过期了怎么重安装)

    苹果手机证书过期(苹果手机证书过期了怎么重安装)

  • 三星黑屏震动开不了机(三星黑屏震动开关在哪)

    三星黑屏震动开不了机(三星黑屏震动开关在哪)

  • 视频号能发多长的视频(视频号能发多长的视频到朋友圈)

    视频号能发多长的视频(视频号能发多长的视频到朋友圈)

  • vivo手机安装包删不掉(vivo手机安装包删除了怎么恢复)

    vivo手机安装包删不掉(vivo手机安装包删除了怎么恢复)

  • a2154是ipad几(ipad型号a2154)

    a2154是ipad几(ipad型号a2154)

  • 华为畅享10e可以指纹解锁吗?(华为畅享10e可以玩光遇吗)

    华为畅享10e可以指纹解锁吗?(华为畅享10e可以玩光遇吗)

  • 苹果6sp支持多少w充电(苹果6plus怎么更新到ios13)

    苹果6sp支持多少w充电(苹果6plus怎么更新到ios13)

  • 钉钉能不能看到学生桌面(钉钉能不能看到点赞的人)

    钉钉能不能看到学生桌面(钉钉能不能看到点赞的人)

  • 主板短路是主板烧了吗(主板短路自己会好吗)

    主板短路是主板烧了吗(主板短路自己会好吗)

  • 打印机显示5sec是什么意思(打印机显示未联机怎么办)

    打印机显示5sec是什么意思(打印机显示未联机怎么办)

  • 小米9支持什么快充协议(小米9支持什么指纹解锁)

    小米9支持什么快充协议(小米9支持什么指纹解锁)

  • 微信公众号干什么用(微信公众号有什么用处)

    微信公众号干什么用(微信公众号有什么用处)

  • 爱奇艺怎么换手机号(爱奇艺怎么换手机号登陆平板发不了短信怎么弄)

    爱奇艺怎么换手机号(爱奇艺怎么换手机号登陆平板发不了短信怎么弄)

  • 手机如何设置手写功能(手机如何设置手指感应)

    手机如何设置手写功能(手机如何设置手指感应)

  • 快手删掉的视频怎么找(快手删掉的视频怎么找回来)

    快手删掉的视频怎么找(快手删掉的视频怎么找回来)

  • iphone8怎么开夜景拍照(iphone8plus夜间模式)

    iphone8怎么开夜景拍照(iphone8plus夜间模式)

  • 啥叫快闪(啥叫快闪店)

    啥叫快闪(啥叫快闪店)

  • 微信扩音器如何开(微信扩音器声音怎么调大?)

    微信扩音器如何开(微信扩音器声音怎么调大?)

  • Mac系统怎么在侧栏监控系统资源?(mac侧边栏设置)

    Mac系统怎么在侧栏监控系统资源?(mac侧边栏设置)

  • 基于PyTorch+Attention注意力机制实现天气变化的时间序列预测(基于核心素养下的大单元教学设计)

    基于PyTorch+Attention注意力机制实现天气变化的时间序列预测(基于核心素养下的大单元教学设计)

  • unplugin-auto-import 和 unplugin-vue-components(unplugin-auto-import/vite)

    unplugin-auto-import 和 unplugin-vue-components(unplugin-auto-import/vite)

  • 微信小程序:用户微信登录流程(附:流程图+源码)(微信小程序用电脑怎么打开)

    微信小程序:用户微信登录流程(附:流程图+源码)(微信小程序用电脑怎么打开)

  • 期末未缴税额为负数怎么调整
  • 土地使用权转让是什么意思
  • 固定资产的进项税额可以抵扣吗
  • 计提税金及附加会计分录
  • 套期会计新旧准则对比
  • 企业养老金计算公式举例说明
  • 厂房无偿租赁合同
  • 增值税零税率与免税有何不同
  • 坏账已核销
  • 生产出来的次品怎么入账
  • 多收账款怎么账务处理
  • 固定资产作为实收资本报废怎么处理
  • 自制发票和增值税发票的区别是什么?
  • 增值税专用发票利润怎么交税
  • 进项税使报表应交税费负数如何处理?
  • 小规模税控盘280服务费怎么申报
  • 不开外经证的后果
  • 统一社会信用代码证
  • 主营业务收入如何确认
  • 企业风险报酬转移怎么理解
  • 无法找到脚本文件c:\windows\system32
  • win10怎么更换版本
  • 一次性支付一年租金怎么做账
  • fxssvc.exe
  • 融资租赁与经营租赁的联系
  • 苏门答腊岛海岸线多少
  • 企业所得税法定税率是多少
  • 实用工具书推荐
  • 微信小程序授权管理在哪里
  • convwthn如何定义
  • 数学建模三个人谁最难
  • hostnamectl命令可以永久修改主机名
  • 长期待摊费用装修款如何摊销
  • access china
  • 将表里的数据批量删除
  • 公司收到保险公司退保费怎么账务处理
  • 房地产拆迁补偿协议
  • 企业收到运输发票
  • 业务招待费的抵扣限额
  • 有进项发票没有销项发票怎样做账
  • 资产处置收益项目有哪些
  • 接受投资的固定资产按什么入账
  • 资本金什么时候可以验资
  • 从政府取得土地使用权缴增值税吗
  • 小规模纳税人差旅费可以抵扣吗
  • 借款利息如何记账
  • 电子承兑汇票到期网银上怎么操作
  • 净利润和毛利润的区别公式
  • 商业零售企业商品进销差价
  • 利用rpm安装软件包时,应使用命令选项
  • 安装win7旗舰版鼠标无法使用
  • win7回收站路径在哪里
  • 电脑重新安装windows后还用激活吗
  • dnssne是什么意思
  • windows xp怎么设置桌面
  • ms office是
  • powerdvd remote下载
  • win8系统屏幕亮度调节
  • win10连热点无网络
  • 联想笔记本win7装win10
  • win7定时开关怎么定时
  • bootstrap designer
  • shell程序中定义的函数能不能有参数
  • cocos2dx schedule
  • js堆栈和队列
  • Android开发中遇到的问题及解决方案
  • shell 计算表达式
  • JavaScript html5 canvas绘制时钟效果
  • shell脚本中判断字符串是否相等
  • python 日期运算
  • 网页全屏是哪个键
  • jquery 设置css
  • jquery图片轮播插件slick不动
  • 如何查询车辆购置税
  • 手机申报税务不成功怎么办
  • 购买增值税发票税务局打电话来问怎么处理?
  • 江西省国家税务局发票查询
  • 出口退税备案表享受增值税优惠政策
  • 百旺开票软件打不开怎么回事
  • 江苏税务局网上预缴税流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设