vue2-vuex详解

目录

  • vuex
    • 构建vuex[多组件数据共享]环境
    • 创建一个空仓库
    • 核心概念 - state状态
    • 核心概念 - mutations方法
      • mutations语法
    • 核心概念 - actions处理异步操作
    • 核心概念 - getters
    • 核心概念 - 模块module(进阶语法)

vuex

  1. 是什么
    vuex是一个状态管理工具状态就是数据
    vuex是一个插件,帮我们管理vue通用的数据(多组件共享数据)
  2. 使用场景
    • 某个状态在很多个组件中使用(eg:个人信息)
    • 多个组件共同维护一份数据(eg:购物车)
  3. 优势
    1. 共同维护一份数据,数据集中化管理
    2. 响应式变化
    3. 操作简洁(vuex提供了一些辅助函数)

构建vuex[多组件数据共享]环境

即创建项目

创建一个空仓库

  1. 安装vuex yarn add vuex@3,如果在创建项目时勾选了vuex则不需要执行这一步
  2. 新建vuex模块文件(新建store/index.js专门存放vuex)
  3. 创建仓库
    Vue.use(Vuex)
    new Vuex.Store()
    
  4. 在main.js中导入挂载到Vue实例上

核心概念 - state状态

  1. 提供数据
    • state提供唯一的公共源数据,所有要共享的数据都统一放在store中的state中存储,在state对象中添加要共享的数据
    • state与data: state存储所有组件共享的数据,data存储自己的数据
      外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
  2. 使用数据
    • 通过store直接访问 外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
    • 通过mapState辅助函数(简化)
      mapState可以把store里的数据自动映射到组件的计算属性中
      1. 导入mapState import { mapState } from 'vuex'
      2. 数组方式引入state(computed中) mapState(['count'])
      3. 展开运算符映射 computed: { ...mapState(['count']) }

核心概念 - mutations方法

vuex需要遵循单向数据流,组件中不能直接修改仓库的数据
eg:this.$store.state.count++的写法是错误的,为了防止在项目的任意一个地方都能随意修改仓库的数据,就要开启严格模式
开启严格模式:在仓库中配置:strict: true
eg:

// 创建仓库(空仓库)
const store = new Vuex.Store({strict: true,state: {}
})

mutations语法

  • 不传参语法
    1. 在仓库中定义mutations对象,对象中存放修改state方法
    mutations: {addCount (state) {state.count += 1}
    }
    
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
    2. 组件提交调用mutations
    this.$store.commit('addCount')
  • 传参语法
    1. 在仓库中定义mutations对象,对象中存放修改state方法
    mutations: {// n就是提交载荷payloadaddCount (state, n) {state.count += n}
    }
    
    1. 组件提交调用mutations
      this.$store.commit('addCount', n)
      【注意】:传参语法只能传递一个参数,如果想传递多个参数,则可以包装成对象或数组
  • 输入框实时输入更新
    【注意】:因为要遵循单项数据流,所以不能用v-model双向绑定
    1. 输入框内容渲染 :value
    2. 监听输入,获取内容 @input
    3. 封装mutations处理函数 mutations传参
    4. 调用传参 commit调用
  • mapMutations辅助函数
    mapMutations把位于mutations的方法提取了出来,映射到组件methods中
    mapState在computed中映射状态,mapMutations在methods中映射方法
    1. 导入 import { mapMutations } from 'vuex'
    2. 展开运算符(methods中)
    3. 调用
      外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

核心概念 - actions处理异步操作

  • 使用场景eg:等待一秒后修改state中的值
  • 说明:mutations必须是同步的,便于监测数据变化,记录调试,异步操作由actions处理
  • 语法:
    1. 在mutations中编写方法
    2. 提供actions方法
      外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
    3. 页面中dispatch调用
      this.$store.dispatch('setAsyncCount', n)
  • mapActions辅助函数
    mapActions把位于actions的方法提取了出来,映射到组件methods中
    1. 导入 import { mapActions } from 'vuex'
    2. 展开运算符(methods中)
    3. 调用
      外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

核心概念 - getters

  • 说明:除了state之外,有时我们还需要从state中派生一些状态,这些状态是一栏state的此时会用到getters
    例如:state定义了list为1-10的数组,组件中需要显示大于5的数据
  • 语法:
    1. 定义getters
      外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
    2. 访问getters
      • 通过store访问
      • 通过辅助函数mapGetters映射(在computed中)
        外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

核心概念 - 模块module(进阶语法)

由于vuex使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得复杂时就会难以维护
模块拆分:
store文件夹下新建modules文件夹,再在modules文件夹中创建各个模块文件,然后在index.js中引用

  • 分模块语法
    单个模块文件中:
    const state = {}const mutations = {}
    const actions = {}
    const getters = {}export default {state,mutations,actions,getters
    }  
    index.js文件中:
    import user from './modules/user'
    modules: {user,setting
    }
    
    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
  • 使用模块中state的数据
    1. 直接通过模块名访问 $store.state.模块名.xxx
    2. 通过mapState映射
      • 默认根级别的映射:mapState(['xxx'])
      • 子模块的映射(需要开启命名空间): mapState('模块名', ['xxx'])
        开启命名空间export default { namespaced: true }
  • 使用模块中getters的数据
    1. 直接通过模块名访问 $store.getters['模块名/xxx']
    2. 通过mapGetters映射
      • 默认根级别的映射:mapGetters(['xxx'])
      • 子模块的映射(需要开启命名空间): mapGetters('模块名', ['xxx'])
        开启命名空间export default { namespaced: true }
  • 模块中的mutations调用语法
    【注意】:默认模块的mutations和actions会被挂载到全局需要开启命名空间,才会被挂载到子空间
    调用子模块中的mutations:
    1. 直接通过store调用
      $store.commit('模块名/xxx', 额外参数)
    2. 通过mapMutations辅助函数映射
      • 默认根级别的映射:mapMutations('[xxx]')
      • 子模块的映射: mapMutations('模块名', '[xxx]')
  • 模块中的actions调用语法
    【注意】:默认模块的mutations和actions会被挂载到全局需要开启命名空间,才会被挂载到子空间
    调用子模块中的actions:
    1. 直接通过store调用
      $store.dispatch('模块名/xxx', 额外参数)
    2. 通过mapActions辅助函数映射
      • 默认根级别的映射:mapMutations('[xxx]')
      • 子模块的映射: mapMutations('模块名', '[xxx]')

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

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

相关文章

苍穹外卖-day03

公共字段自动填充新增菜品菜品分页查询删除菜品修改菜品 功能实现: 菜品管理 1. 公共字段自动填充 1.1 问题分析 在上一章节我们已经完成了后台系统的员工管理功能和菜品分类功能的开发,在新增员工或者新增菜品分类时需要设置创建时间、创建人、修改…

最简单解决NET程序员在centos系统安装c#网站

目前随着技术栈转移,c#程序员如何在linux服务器中部署net程序呢? 我做了一次实验:一般来说runtime和sdk都要装。 1.centos系统内命令行输入命令 sudo yum install dotnet-sdk-6.0 安装6.0版 2.检测下是否成功:dotnet --versio…

【HarmonyOS——MVVM模式 | 理解MVVM模式,看这一篇就够了】

大家好,我是学徒小z,近期项目开发中遇到一些数据源放置混乱的问题,所以带来一篇MVVM模式的文章 文章目录 MVVM模式为什么要用MVVM模式对于鸿蒙中MVVM模式的疑惑ArkUI的MVVM项目结构中的MVVM1. 概述2 .分层说明3. 架构核心原则不可跨层访问下…

网络基础:http协议和内外网划分

声明 学习视频来自B站UP主泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 泷羽sec的个人空间-泷羽sec个人主页-哔哩哔哩视频https://space.bilibili.com/350329294 一,H…

【2024软考架构案例题】你知道 Es 的几种分词器吗?Standard、Simple、WhiteSpace、Keyword 四种分词器你知道吗?

👉博主介绍: 博主从事应用安全和大数据领域,有8年研发经验,5年面试官经验,Java技术专家,WEB架构师,阿里云专家博主,华为云云享专家,51CTO 专家博主 ⛪️ 个人社区:个人社区 💞 个人主页:个人主页 🙉 专栏地址: ✅ Java 中级 🙉八股文专题:剑指大厂,手撕 J…

CS61b part6

8.6 Implementation Inheritance and Default Method 让我们谈谈另一种类型的继承,这种继承与之前的关系紧密但精神上却非常不同,这种新的继承类型称为实现继承。我们之前看到的是接口继承,在这种方法中,子类获得了方法的签名&am…

C++——异常

异常是在程序执行的过程中发生了某种错误,异常的处理机制允许我们讲发生的异常抛出给程序的另外一部分,对这个错误进行处理。这个机制让问题检测的环节和问题处理的环节分离。检测环节只需要负责检测即可,无需关系解决的细节问题。在C语言中处…

『VUE』19. scope避免组件之间样式互相覆盖(详细图文注释)

目录 使用多个组件带有样式分析如何避免css覆盖总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 使用多个组件带有样式 ComPonent1.vue <template><h3>ComPonent1.vue</h3> </template><script&g…

CUDA解说

CUDA&#xff08;Compute Unified Device Architecture&#xff09;是NVIDIA公司开发的一种并行计算平台和编程模型。 它允许开发者使用NVIDIA的GPU&#xff08;图形处理单元&#xff09;进行通用计算&#xff0c;即GPGPU&#xff08;General-Purpose computing on Graphics P…

海量日志收集ELK实战(docker部署ELK)从日志中挖取宝贵数据

文章目录 一、准备工作1.1 服务器配置要求1.2 关闭防火墙1.3 创建docker网络 二、docker安装elasticsearch2.1 下载 Elastic Search 镜像2.2 创建宿主机的挂载目录2.3 设置宿主机max_map_count2.5 docker启动命令2.6 关闭es容器密码安全验证2.7 重启es容器2.8 测试安装成功2.9 …

nacos占用内存过高问题

1. 问题 在微服务项目的学习和开发过程中&#xff0c;服务注册中心 Nacos 是一个必不可少的组件。Nacos 提供了服务注册、配置管理等核心功能&#xff0c;使得分布式服务可以轻松实现互相发现、负载均衡和动态配置。然而&#xff0c;许多微服务项目中包含多个模块&#xff0c;…

JavaScript核心编程 - 原型链 作用域 与 执行上下文

原型 在JavaScript中&#xff0c;每个对象都有一个内部属性&#xff0c;称为__proto__&#xff08;在ES6中&#xff0c;这个属性被Object.getPrototypeOf()和Object.setPrototypeOf()方法标准化&#xff09;&#xff0c;这个属性指向该对象的原型。原型本身也是一个对象&#…

C++ 引用 详解

引用 引用 不是新定义一个变量&#xff0c;而 是给已存在变量取了一个别名 &#xff0c;编译器不会为引用变量开辟内存空 间&#xff0c;它和它引用的变量 共用同一块内存空间。 比如&#xff1a; 李逵 &#xff0c;在家称为 " 铁牛 " &#xff0c;江湖上人称 &qu…

计算机视觉中的中值滤波:经典案例与Python代码解析

Hey小伙伴们&#xff01;今天我们要聊的是计算机视觉中的一个重要技术——中值滤波。中值滤波是一种非线性滤波方法&#xff0c;主要用于去除图像中的椒盐噪声&#xff0c;同时保留图像的边缘和细节。通过中值滤波&#xff0c;我们可以显著改善图像的质量。让我们一起来看看如何…

【C++练习】计算前N项自然数之和

题目&#xff1a; 计算前N项自然数之和 描述&#xff1a; 编写一个C程序&#xff0c;要求用户输入一个整数N&#xff0c;然后计算并输出从1到N&#xff08;包括N&#xff09;的所有自然数之和。 程序功能要求&#xff1a; 程序首先提示用户输入一个整数N。使用一个循环结构…

SpringBoot日志配置

Spring默认日志风格 个人感觉默认的格式还是不错的&#xff0c;每一列都可以对其&#xff0c;而且能用颜色区分&#xff0c;查看日志明了&#xff1b; 下面是他默认的 pattern的配置 %clr(%d{yyyy-MM-dd HH:mm:ss.SSS}){faint} %clr(${LOG_LEVEL_PATTERN:%5p}) %clr(${PID:- …

Vue3学习笔记(上)

Vue3学习笔记&#xff08;上&#xff09; Vue3的优势&#xff1a; 更容易维护&#xff1a; 组合式API更好的TypeScript支持 更快的速度&#xff1a; 重写diff算法模板编译优化更高效的组件初始化 更小的体积&#xff1a; 良好的TreeShaking按需引入 更优的数据响应式&#xf…

看懂本文,入门神经网络Neural Network

神经网络&#xff08;Neural Network&#xff09; 1.1图片 每一个图片都是三维数组&#xff0c;每个像素的值为0-255&#xff0c;如 训练集Training Dataset&#xff1a;“上课学的知识”&#xff0c;用于训练模型得到参数 验证集Validation Dataset&#xff1a;“课后习题”…

Zoho Books助外贸,应收账款简化管

ZohoBooks财务管理软件助外贸企业精准管理客户信息&#xff0c;简化跨境开票&#xff0c;集成支付网关自动对账&#xff0c;智能提醒跟进账款&#xff0c;提供强大报表分析功能&#xff0c;支持多币种和当地税法&#xff0c;促进财务健康与资金回笼。 一、精准的客户信息管理 …

保姆级教程!!教你通过【Pycharm远程】连接服务器运行项目代码

小罗碎碎念 这篇文章主要解决一个问题——我有服务器&#xff0c;但是不知道怎么拿来写代码&#xff0c;跑深度学习项目。确实&#xff0c;玩深度学习的成本比较高&#xff0c;无论是前期的学习成本&#xff0c;还是你需要具备的硬件成本&#xff0c;都是拦路虎。小罗没有办法…