首页 > 其他分享 >vuex

vuex

时间:2023-04-30 18:00:11浏览次数:36  
标签:需要 函数 vuex mapState mapGetters 店员

vuex介绍

我们可以把vuex想象成一个手机店,所有用户都可以访问到这个手机店,手机店中有一个店员和一个维修人员,这个手机店有很多商品,比如:各种手机,蓝牙耳机,保护膜,保护套,手机卡等,这个商店的属性就相当于state。商店中还有一些商品,需要商家进行处理,比如充电器,耳机,手机套等一些东西,用户购买时需要打包成一套,这些任务用户可以直接买一套产品,也可以分开,一个一个买。这里商家帮我们整理成一个商品盒,就相当于getters。之后用户购买手机,需要给店员付款,付款之后才可以取手机,需要执行完一些流程,来对商品进行操作,因为店员只有一个,因此店员在服务当前顾客时,其它顾客就需要等待当前顾客购买完,这是同步的处理,会造成程序的组测,也就是mutations。用户的手机遇到了问题,需要维修,店员只用把手机交给维修人员即可,并不影响他去接待其它客户,这就是actions。之后当店铺做大了,可能会有更多牌子的手机,更多的店员,更多的维修人员,那么就需要我们开分店,将手机分发到不同的分店,店员以及维修人员都分配到不同地方,只需要在总店做记录即可,这就是modules
vuex的相关知识点大概就是这些,仅作参考。

使用vuex

在使用vuex时,我们只需要在该组件中引入store,之后就可以通过this.$store去进行操作,在vue3中则可以使用对应的useStore进行操作。
但是如果要在当前文件中使用很多的mutations对应的方法或者是state,则就非常不方便。因此我们可以使用辅助函数,mapMutations,mapGetters,mapActoins,mapState
使用mapState以及mapGetters:

  1. 先在当前文件中导入mapState以及mapGetters,import {mapGetters,mapState} from 'vuex'
  2. 之后在computed钩子函数中使用
computed:{
	...mapState(['loginState','dishCart']),
	...mapGetters(['userInfo'])
}

这里可以分别导入需要使用的内容,以数组形式,还可以使用箭头函数的方式进行导入。
使用mapMutations以及mapActions
mapActions和mapMutations的使用方法和上面两个类似,不过我们需要在method中进行导入,数组中为我们需要的函数名,

注意事项

调用vuex中的函数进行参数传递时,在vuex中的函数声明有两个参数,第一个参数为state,第二个参数为options,也就是我们需要调用这个函数所传递的参数,如果我们要传递的函数有很多个,那么这里的options在传递时要传递成对象的形式,否则在vuex中无法接收到,这个是固定的。通俗一点说也就是,在vuex中声明的函数只接收一个参数,如果需要传递多个参数,则可以使用对象的形式进行传递,否则vuex无法接收

标签:需要,函数,vuex,mapState,mapGetters,店员
From: https://www.cnblogs.com/zx529/p/17365556.html

相关文章

  • vuex
       ......
  • 动力节点老杜Vue框架教程【五】Vuex
    Vue.js是一个渐进式MVVM框架,目前被广泛使用,也成为前端中最火爆的框架Vue可以按照实际需要逐步进阶使用更多特性,也是前端的必备技能动力节点老杜的Vue2+3全家桶教程已经上线咯!学习地址:https://www.bilibili.com/video/BV17h41137i4/视频将从Vue2开始讲解,一步一个案例,知识点......
  • 老杜2023最新Vue实战精讲(五)Vuex
    动力节点老杜全新版Vue教程笔记分享给大家学习の地止:https://www.bilibili.com/video/BV17h41137i4视频教程从Vue2开始讲解,一步一个案例,知识点由浅入深,然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。视频中会把每一个Vue的知识点讲解的非常通透,不但举例......
  • vuex持久化
    1、使用场景vuex刷新之后数据会消失2、使用方法(1)结构1点击查看代码import{createStore}from"vuex"importstatefrom'./state'importmutationsfrom'./mutations'importactionsfrom'./actions'import*asgettersfrom'./getter......
  • 老杜Vue实战教程完整版笔记(5)Vuex
    接上篇文章,分享动力节点老杜全新版Vue教程笔记学习の地止:https://www.bilibili.com/video/BV17h41137i45Vuex5.1vuex概述vuex是实现数据集中式状态管理的插件。数据由vuex统一管理。其它组件都去使用vuex中的数据。只要有其中一个组件去修改了这个共享的数据,其它组件会同......
  • Vuex
    vuexVuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说人话:将组件中需要共享的数据交给vuex来帮我们进行管理,例如:用户登录状态、加入购物车。1.案例:登录vuecreatevxdem......
  • 5.VueX
    5.VueX5.1.简介5.1.1.介绍概念以及作用:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。使用场景:多个组件依赖于同一状态来自不同组件的行为需要变更同一状态5.1.2......
  • Vuex
    Vuex概念在Vue中实现集中式状态(数据)管理的一个Vue的插件,对Vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间的通信。使用场景多个组件需要共享数据时。搭建Vuex环境ps:vue2只能使用Vuex3,Vue3只能使用Vue41.创建文件:src/sto......
  • 动力节点⑤章 vuex——vue视频笔记
    5Vuex5.1vuex概述vuex是实现数据集中式状态管理的插件。数据由vuex统一管理。其它组件都去使用vuex中的数据。只要有其中一个组件去修改了这个共享的数据,其它组件会同步更新。一定要注意:全局事件总线和vuex插件的区别:全局事件总线关注点:组件和组件之间数据如何传递,一个绑定$......
  • npm i vuex-persistedstate安装失败怎么办
    在安装vuex的插件vuex-persistedstate来支持vuex的状态持久化时,出现如下报错: 在这里给大家提供一个解决方法,输入此行命令即可成功安装:npminstall--savevuex-persistedstate-f  ......