【vue2】vuex超超超级详解!(核心五大配置项)

news2025/1/11 1:28:26

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博       主:初映CY的前说(前端领域)

🌞个人信条:想要变成得到,中间还有做到!

🤘本文核心:vuex基础认识、state、getters、mutations  actions、modules使用

目录(文末原素材)

 一、vuex介绍

1.vuex概念引入:

2.为什么要有vuex

3.Vuex使用场景

 二、五大核心配置项 

1.state

①原生写法

②state辅助函数mapSaatate

2.getters

①原生写法

②getters辅助函数mapGetters

3.mutations

①原生写法

②mutations辅助函数mapMutations

4.actions

②actions辅助函数mapActions

vuex工作流程:

5.modules

①原生写法

②modules封装写法

【vuex辅助函数源素材】


 一、vuex介绍

1.vuex概念引入:

当我们修改其中一个头像的时候,我们怎么同步到多个组件当中呢?

 这个是平级的非父子关系我们应该怎么传递值进去呢?用vuex来对非父子关系传值

2.为什么要有vuex

  • vuex的作用是解决多组件状态共享的问题,在大型的项目中,组件通讯会变得很混乱,使用vuex可以统一管理组件之间的通讯
  • vuex是响应式布局: 只要vuex中的数据变化,对应的组件会自动更新(类似于vue数据驱动)

3.Vuex使用场景

不是所有的场景都适用于vuex,只有在必要的时候才使用vuex,如果不必要,尽量别用

2.适合使用vuex场景

  • 这个数据需要在很多个地方要写,如果采用组件传值方式,写起来很麻烦,而且多个地方都要写
  • 例如:用户信息(姓名,头像),可能会在很多个地方使用(个人页面,评论页面等)

3.不适合使用vuex场景

  • 这个数据不需要多个地方使用,如果某个数据仅仅只是在两个组件之间通讯,优先使用props或$emit

4.vuex特点

  • 所有组件数据共享
  • 响应式: 一旦vuex数据修改,所有使用的地方都会自动更新

 二、五大核心配置项 

1.state

①原生写法

1.概念:

state提供vuex唯一的公共数据源,所有共享的数据都要统一放到store中的State中存储。

2.声明语法:

state:{
//在此处写共享属性即可
}

 3.使用语法:

$store.state.属性名

举个例子:

1.声明:

 2.使用:

可以看出我们的存放在state中的数据被我们成功的获取到啦!

②state辅助函数mapSaatate

1.概念:

将vuex中的数据映射到组件的计算属性中,简化书写操作(写在computed中)

2.使用方法:

1.导入import { mapState } from 'vuex'

2.    ...mapState([‘state中属性名’])

3.举个例子


2.getters

①原生写法

1.概念:

state的计算属性

2.声明语法:

 getters: {
    计算属性名()(state) {
      return 要返回的值
    }
  }

3.使用语法

$store.getters.getter名

举个例子

1.声明

 2.使用

可以看出我们的存放在getters中的数据被我们成功的获取到了,注意步骤是getters下

②getters辅助函数mapGetters

1.概念:

同上是简化我们的写法(写在computed中)

2.使用方法:

1.导入import { mapGetters } from 'vuex'

2.    ...mapGetters([‘getters中计算属性’])

3.举个例子


3.mutations

①原生写法

 1.概念:

state数据的修改只能通过mutations,并且mutations必须是同步的。Mutations是同步更新state数据的唯一方式!!!

2.声明语法:

  mutations:{
  	mutation名(state , 载荷 ) {
  },

每一项都是一个函数,可以声明两个形参:

第一个参数是必须的,表示当前的state。

第二个参数是可选的,表示载荷,是可选的。在使用时要传入的数据

专业术语载荷:表示额外的参数

3.使用语法

this.$store.commit('mutation名', 载荷 )

4.举个例子

1.声明

 2.使用

 当我们点击按钮的时候,我们荷载(payload)中的数据传到了mutation中随后完成我们的值传递,将我们原始的数据改变。

②mutations辅助函数mapMutations

 1.概念:

简化书写操作成方法形式(写在methods中)

2.使用方法:

1.导入import { mapMutations } from 'vuex'

2.    ...mapMutations([‘mutations名’])

3.举个例子


4.actions

 1.概念:

actions: 异步更新我们的数据(例如你的数据来源于ajax)

2.声明语法:

这个地方的载荷一般为ajax接口需要的参数,如果没有就不用传

 actions: {
    // context对象会自动传入,它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 异步操作获取数据
      // 2. commit调用mutation来修改数据
      // context.commit('mutation名', 载荷)
    }
  }

每一项都是一个函数,可以声明两个形参:

第一个参数是必须的,表示当前的state。

第二个参数是可选的,表示载荷,是可选的。在使用时要传入的数据

专业术语载荷:表示额外的参数

3.使用语法

this.$store.dispath ( 'actions的名字',参数 )

4.举个例子

4.1.声明

 4.2.使用

②actions辅助函数mapActions

 1.概念:

简化书写操作成方法形式(写在methods中)

2.使用方法:

1.导入import { mapActions } from 'vuex'

2.    ...mapmapActions([‘action名’])

3.举个例子

vuex工作流程:

我们先触发了Actions中的异步操作,当异步结果出来之后(如果没有异步操作则直接执行后面的操作),我们触发commit调用mutations去修改我们的state,最后因为我们是具有响应式的特点,因此我们的数据被修改成功。


5.modules

①原生写法

1.概念:

模块化处理vuex数据,将我们每个模块的vuex数据分开处理

2.声明语法:

//在我们的store/index.js中书写
 modules: {
  	模块名1: {
    	// namespaced为true,则在使用mutations时,就必须要加上模块名
      	namespaced: true, 

 3.使用语法:

//state
全局的: $store.state.数据项名
模块的: $store.state.模块名.数据项名
//getters
全局的: $store.getters.getter名
模块的: $store.getters['模块名/getters名']
//mutations
全局的: $store.commit('mutations名',载荷) 
模块的: $store.commit('模块名/mutations名',载荷)
//actions
全局的: $store.dispatch('actions名',载荷) 
模块的: $store.dispatch('模块名/actions名',载荷)

 4.举个例子

4.1声明:

我们先封装模块

在index.js中导入

 4.2使用:

 注意:模块化语法一定一定需要开启命名空间namespaced:true

②modules封装写法

 注意点:我们分了模块,我们的数据要单独的导入进来喔


【vuex辅助函数源素材】

1.先搭建我们的脚手架(务必勾选上以下选项)

 2.引入我们的组件

App.vue

<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class="footer_wrap">
      <!-- 路由导航 -->
      <!-- <router-link to="/native">原生写法</router-link> -->
      <router-link to="/facilitate">辅助函数写法</router-link>
    </div>
    <!-- 下面内容 -->
    <div class="top">
      <!-- 路由出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'facilitate-page',

  methods: {}
}
</script>

<style scoped>
body,
html {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a,
span {
  cursor: pointer;
  flex: 1;
  text-decoration: none;
  padding: 15px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover,
span:hover {
  background-color: #555;
}

.top {
  padding-top: 50px;
}

.footer_wrap .router-link-active {
  background-color: #000;
}
</style>

Facilitate.vue(Views/ Facilitate.vue)

<template>
  <div>
    <h2>辅助函数写法</h2>
    <div class="user">
      <h3>用户信息</h3>
      <p>姓名:{{ userInfo.name }}</p>
      <p>年龄:{{ userInfo.age }}</p>
      <button @click="doChange1">点我修改</button>
    </div>
    <div class="setting">
      <h3>用户设置</h3>
      <p>颜色主题:{{ settingInfo.color }}</p>
      <p>字体大小:{{ settingInfo.fontSize }}</p>
      <button @click="doChange2">点我设置</button>
    </div>
    <div class="shopcar">
      <h3>购物车数量</h3>
      <p>当前数量:{{ count }}</p>
      <p>当前总价格:{{ total }}</p>

      <button @click="doChange3">点我数量加一</button>
    </div>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  name: 'facilitate-page',
  computed: {
    ...mapState('user', ['userInfo']),
    ...mapState('setting', ['settingInfo']),
    ...mapState('shopcar', ['count']),
    ...mapGetters('shopcar', ['total'])
  },
  methods: {
    ...mapMutations('user', ['updateUserInfo']),
    ...mapMutations('setting', ['updateSettingInfo']),
    ...mapActions('shopcar', ['setCount']),
    // 1.点击修改信息
    doChange1 () {
      // 提交mutations
      this.updateUserInfo({
        name: '结束啦',
        age: 666
      })
    },
    // 2.点击修改设置
    doChange2 () {
      // 提交mutations
      this.updateSettingInfo({ color: 'green', fontSize: '20px' })
    },
    // 3.点击购买按钮
    doChange3 () {
      // 提交actions
      this.setCount(this.count + 1)
    }
  }
}
</script>

<style scoped>
.user {
  border: 2px solid green;
  margin: 5px;
}

.setting {
  border: 2px solid orange;
  margin: 5px;
}

.shopcar {
  border: 2px solid magenta;
  margin: 5px;
}
</style>

3.引入路由

 index.js (router/index.js)

import Vue from 'vue'
import VueRouter from 'vue-router'

// 1.导入组件
// import native from '@/views/Native.vue'
import facilitate from '@/views/Facilitate.vue'

Vue.use(VueRouter)

// 2.路由规则
const routes = [
  // { path: '/', redirect: '/Native' },
  // { path: '/native', component: native },
  { path: '/facilitate', component: facilitate }
]

const router = new VueRouter({
  routes
})

export default router

    愿这一份资料能帮帮助到你,如果可以请关注博主呦!!!                                       

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/192388.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新年找工作?python带你批量采集招聘数据

前言 大家早好、午好、晚好吖 ❤ ~ 必备素材: stealth.min.js 谷歌浏览器谷歌驱动selenium3.141.0 不知道怎么弄嘚同学可以私我获取哦~ 开发环境: python 3.8 pycharm 专业版 操作步骤 selenium 模块: 操作浏览器 打开一个浏览器 打开一个网址 获取数据 保存数据 …

性能测试工具-nmon

nmon 文章目录nmon介绍下载Linux系统服务器在服务器上新建nmon文件夹将下载文件上传到服务器新建的文件夹内修改文件名启动nmon启动nmon命令行使用nomn_analyser对监控结果进行分析图表分析nmon 主要用来做性能测试时对服务器的监控 捕捉各类系统资源的使用情况&#xff0c;并…

Maven实战-2.pom.xml标签说明

前言 持续更新中… pom.xml文件 1.<project> 这是pom.xml的根元素&#xff0c;所有的标签都包含在<project>…</project>之间。 2.<modelVersion> 指定当前POM模型的版本&#xff0c;对于maven2和maven3来说&#xff0c;它只能是4.0.0 <mode…

【linux】剖析底层——带你详细了解Linux内核源码的构成及其作用(1)

目录 一、arch文件 1.作用 2.arch文件下的子文件示意图 3.各个子文件的作用 &#xff08;1&#xff09;alpha &#xff08;2&#xff09;arc &#xff08;3&#xff09;arm &#xff08;4&#xff09;arm64 &#xff08;5&#xff09;cshy &#xff08;6&#xff09;…

8 加载数据集

文章目录前提知识了解数据集Mini-Batch常用术语DataLoader核心参数核心功能小tips课程代码实例课程来源&#xff1a; 链接课程文本部分来源&#xff08;参考&#xff09;&#xff1a; 链接以及&#xff08;强烈推荐&#xff09; Birandaの前提知识了解 enumerate函数 数据集 …

局域网中UTP连接,如何实现防止芯片损坏,防止信号产生各种误码,及实现CHIP之间的阻抗匹配

Hqst盈盛电子导读&#xff1a;局域网中UTP连接&#xff0c;如何实现防止芯片损坏&#xff0c;防止信号产生各种误码&#xff0c;及实现CHIP之间的阻抗匹配&#xff0c;浅谈网络滤波器作用一&#xff0c;在有线局域网中&#xff0c;计算机与服务器之间&#xff0c;计算机与路由器…

10、条件语句

目录 一、if语句的基本形式 1. if语句形式 2. if…else语句形式 3. else if语句形式 二、if的嵌套形式 三、条件运算符 四、switch语句 1. switch语句的基本形式 2. 多路开关模式的switch语句 一、if语句的基本形式 在if语句中&#xff0c;首先判断表达式的值&#x…

【BetterBench】2023年美赛辅导

通知 2023年美赛快开始啦&#xff0c;提醒大家比赛信息&#xff0c;比赛期间我会全称提供辅导&#xff0c;包括建模方案、实现代码&#xff01; 可以参考往年所有建模比赛&#xff0c;本人开源的建模方案及实现代码 2020-2023年所有数学建模竞赛专栏 报名信息 1.辅助报名截止…

【异常】前端Babel提示 Support for the experimental syntax ‘jsx‘ isn‘t currently enabled

一、报错内容 17:33:41 - Building for production... 17:34:13 ERROR Failed to compile with 5 errors5:34:09 PM 17:34:13 17:34:13 error in ./src/layout/components/Sidebar/Item.vue?vue&typescript&langjs& 17:34:13 17:34:13 Syntax Error…

《流浪地球2》看不懂?根服务器、权威解析,专业科普来了

随着《流浪地球2》的上映&#xff0c;关于国产硬科幻电影的话题也火爆起来&#xff0c;片中各种脑洞大开&#xff0c;科技设定可圈可点&#xff0c;例如量子计算机、脑机接口、太空电梯等。从专业角度来看&#xff0c;作为国产科幻大片之光的《流浪地球2》为了保证真实性确实狠…

二叉平衡树 之 红黑树 (手动模拟实现)

目录 1、红黑树的概念 2、红黑树的性质 3、红黑树节点的定义 4、红黑树的插入 5、红黑树验证 代码汇总 6、红黑树的删除&#xff08;了解&#xff09; 7、红黑树的应用 8、红黑树 VS AVL树 1、红黑树的概念 红黑树&#xff0c;就是一种特殊的二叉搜索树&#xff0c;每个…

MySQL详解(四)——高级 2.0

性能分析 Explain 使用EXPLAIN关键字可以模拟优化器&#xff08;不改变查询结果前提下&#xff0c;调整查询顺序&#xff0c;生成执行计划&#xff09;执行SQL查询语句&#xff0c;从而知道MySQL是如何处理你的SQL语句的。分析你的查询语句或是表结构的性能瓶颈 功能&#x…

ECharts线性渐变色示例演示(2种渐变方式)

第003个点击查看专栏目录Echarts的渐变色采用了echarts.graphic.LinearGradient的方法&#xff0c;可以根据代码中的内容来看如何使用。线性渐变&#xff0c;多用于折线柱形图&#xff0c;前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1&#xff0c;相当于在图形包围盒中的百分…

PTA L1-025 正整数A+B(详解)

前言&#xff1a;本期是关于正整数AB的详解&#xff0c;内容包括四大模块&#xff1a;题目&#xff0c;代码实现&#xff0c;大致思路&#xff0c;代码解读&#xff0c;今天你c了吗&#xff1f; 题目&#xff1a; 题的目标很简单&#xff0c;就是求两个正整数A和B的和&#xf…

用户使用苹果AirTag来追踪宠物存在风险,苹果Find My功能用处广

苹果的 AirTag 不失为追踪宠物的一种便捷方式&#xff0c;这样宠物即便挣脱宠物圈或者其它方式丢失&#xff0c;都可以通过“Find My”方式追踪定位。正如《华尔街日报》所指出的&#xff0c;这种方式也存在 AirTag 被宠物吞食的风险。 AirTag 的直径为 1.26 英寸&#xff0c…

【Faster R-CNN】之 Resize_and_Padding 代码精读

【Faster R-CNN】之 Resize_and_Padding1、前言&#xff1a;2、resize_image_and_bbox1&#xff09;先对图像做resize处理2&#xff09;再对 bounding box 做resize处理3、padding_images代码1、前言&#xff1a; 在上一篇文章 【Faster R-CNN】之 Dataset and Dataloader 代码…

Linux网络:传输层之UDPTCP协议

文章目录一、端口号1.端口号范围划分2.常用命令二、UDP 协议1.格式2.特点3. UDP 的缓冲区4. UDP 使用注意事项5.基于 UDP 的应用层协议三、TCP 协议1.格式2.确认应答机制3.超时重传机制4.连接管理机制三次握手四次挥手5.滑动窗口6.流量控制7.拥塞控制8.延迟应答9.捎带应答10.面…

PyQt5利用Qt Designer制作一个可以拖动获取文件信息的页面

前言 本篇在讲什么 用pyqt5制作一个简单的程序&#xff0c;拖动文件或脚本可以读取文件信息 本篇适合什么 适合初学PyQt5的小白 本篇需要什么 对Python语法有简单认知 对Qt有简单认知 依赖Pycharm编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&…

[Golang实战]整理Golang忽略的问题

整理Golang忽略的问题参考资料1.WaitGroup与GoRoutine的竞速2.Mutex互斥锁和RWMutex互斥读写锁3.poll,select,epoll4.何时栈和堆?5.GoRoutine合理使用6.GoRoutine优雅退出6.1data channel关闭通知退出6.2exit channel关闭通知退出6.3context超时或取消通知退出6.4WaitGroup/Er…

IPWorks EDI 2022.0.8381 for NET Crack

IPWorks EDI基于用于安全 EDI 通信&#xff08;AS2、SFTP、OFTP、RosettaNet、MLLP 等&#xff09;的领先 EDI-INT 协议&#xff0c;IPWorks EDI 库包含促进安全 EDI 消息传递以及 EDI 映射、翻译和验证&#xff08;X12、 EDIFACT、HL7、TRADACOMS、VDA、XML 和 JSON&#xff0…