【Vue2+3入门到实战】(18)VUE之Vuex状态管理器概述、VueX的安装、核心概念 State状态代码实现 详细讲解

目录

    • 一、[Vuex](https://vuex.vuejs.org/zh/) 概述
      • 1.是什么
      • 2.使用场景
      • 3.优势
      • 4.注意:
    • 二、需求: 多组件共享数据
      • 1.创建项目
      • 2.创建三个组件, 目录如下
      • 3.源代码如下
    • 三、vuex 的使用 - 创建仓库
      • 1.安装 vuex
      • 2.新建 `store/index.js` 专门存放 vuex
      • 3.创建仓库 `store/index.js`
      • 4 在 main.js 中导入挂载到 Vue 实例上
      • 5.测试打印Vuex
    • 四、核心概念 - state 状态
      • 1.目标
      • 2.提供数据
      • 3.访问Vuex中的数据
      • 4.通过$store访问的语法
      • 5.代码实现
        • 5.1模板中使用
        • 5.2组件逻辑中使用
        • 5.3 js文件中使用

在这里插入图片描述

一、Vuex 概述

目标:明确Vuex是什么,应用场景以及优势

1.是什么

Vuex 是一个 Vue 的 状态管理工具,状态就是数据。

大白话:Vuex 是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如:购物车数据 个人信息数

2.使用场景

  • 某个状态 在 很多个组件 来使用 (个人信息)

  • 多个组件 共同维护 一份数据 (购物车)

在这里插入图片描述

3.优势

  • 共同维护一份数据,数据集中化管理
  • 响应式变化
  • 操作简洁 (vuex提供了一些辅助函数)

在这里插入图片描述

4.注意:

官方原文:

  • 不是所有的场景都适用于vuex,只有在必要的时候才使用vuex
  • 使用了vuex之后,会附加更多的框架中的概念进来,增加了项目的复杂度 (数据的操作更便捷,数据的流动更清晰)

Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~

二、需求: 多组件共享数据

目标:基于脚手架创建项目,构建 vuex 多组件数据共享环境

在这里插入图片描述

效果是三个组件共享一份数据:

  • 任意一个组件都可以修改数据
  • 三个组件的数据是同步的

1.创建项目

vue create vuex-demo

2.创建三个组件, 目录如下

|-components
|--Son1.vue
|--Son2.vue
|-App.vue

3.源代码如下

App.vue在入口组件中引入 Son1 和 Son2 这两个子组件

<template><div id="app"><h1>根组件</h1><input type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'export default {name: 'app',data: function () {return {}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App)
}).$mount('#app')

Son1.vue

<template><div class="box"><h2>Son1 子组件</h2>从vuex中获取的值: <label></label><br><button>值 + 1</button></div>
</template><script>
export default {name: 'Son1Com'
}
</script><style lang="css" scoped>
.box{border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值:<label></label><br /><button>值 - 1</button></div>
</template><script>
export default {name: 'Son2Com'
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

三、vuex 的使用 - 创建仓库

在这里插入图片描述

1.安装 vuex

安装vuex与vue-router类似,vuex是一个独立存在的插件,如果脚手架初始化没有选 vuex,就需要额外安装。

yarn add vuex@3 或者 npm i vuex@3

2.新建 store/index.js 专门存放 vuex

​ 为了维护项目目录的整洁,在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)

在这里插入图片描述

3.创建仓库 store/index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)// 创建仓库 store
const store = new Vuex.Store()// 导出仓库
export default store

4 在 main.js 中导入挂载到 Vue 实例上

import Vue from 'vue'
import App from './App.vue'
import store from './store'Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

此刻起, 就成功创建了一个 空仓库!!

5.测试打印Vuex

App.vue

created(){console.log(this.$store)
}

四、核心概念 - state 状态

1.目标

明确如何给仓库 提供 数据,如何 使用 仓库的数据

2.提供数据

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

打开项目中的store.js文件,在state对象中可以添加我们要共享的数据。

// 创建仓库 store
const store = new Vuex.Store({// state 状态, 即数据, 类似于vue组件中的data,// 区别:// 1.data 是组件自己的数据, // 2.state 中的数据整个vue项目的组件都能访问到state: {count: 101}
})

3.访问Vuex中的数据

问题: 如何在组件中获取count?

  1. 通过$store直接访问 —> {{ $store.state.count }}
  2. 通过辅助函数mapState 映射计算属性 —> {{ count }}

4.通过$store访问的语法

获取 store:1.Vue模板中获取 this.$store2.js文件中获取 import 导入 store模板中:     {{ $store.state.xxx }}
组件逻辑中:  this.$store.state.xxx
JS模块中:   store.state.xxx

5.代码实现

5.1模板中使用

组件中可以使用 $store 获取到vuex中的store对象实例,可通过state属性属性获取count, 如下

<h1>state的数据 - {{ $store.state.count }}</h1>
5.2组件逻辑中使用

将state属性定义在计算属性中 https://vuex.vuejs.org/zh/guide/state.html

<h1>state的数据 - {{ count }}</h1>// 把state中数据,定义在组件内的计算属性中computed: {count () {return this.$store.state.count}}
5.3 js文件中使用
//main.jsimport store from "@/store"console.log(store.state.count)

每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢?

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

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

相关文章

万字盘点 Android 领域在 2023 年的重要技术:AI, 14, Compose, 鸿蒙...

AICore 2022 年底横空出世的 GPT-3.5 引发了全球的大模型 LLM 狂潮。作为在 AI 领域耕耘多年的巨头&#xff0c;Google 自然不会坐视不管&#xff0c;于 2023 年底之际发布了超越 GPT-4 的 Gemini 系列模型&#xff0c;其在多模态领域的表现令无数人震撼。 而对于 Android 开发…

路由器tcpdump抓包方法

背景 一些嵌入式设备无法修改固件或者配置&#xff0c;但又想分析其网络访问&#xff0c;就不得不在路由器上抓包。 本文已openwrt为例&#xff0c;配合pc端wireshark软件&#xff0c;说明抓包过程 1.路由器安装tcpdump opkg update opkg install libc opkg install libpcap …

nacos2.3.0配置中心问题处理

问题&#xff1a;Error to process server push response: {"headers":{},"abilityTable":{"supportPersistentInstanceByGrpc":true},"module":"internal"} 处理办法&#xff1a; 将pom.xml中 <!-- nacos服务注册/发…

我在Vscode学OpenCV 图像处理四(轮廓查找 cv2.findContours() cv2.drawContours())-- 待补充

图像处理四&#xff08;轮廓查找&#xff09; 一、前言1.1 边缘检测和轮廓查找的区别是什么1.1.1 边缘检测&#xff1a;1.1.2 轮廓查找&#xff1a; 1.2 边缘检测和轮廓查找在图像处理中的关系和流程 二、查找并绘制轮廓2.1 cv2.findContours()&#xff1a;2.1.1 详细介绍&…

Vue3的proxy

vue3.0中,使用proxy替换了原来遍历对象使用Object.defineProperty方法给属性添加set/get    vue的核心能力之一是监听用户定义的状态变化并响应式刷新DOM   vue2是通过替换状态对象属性的getter和setter来实现的,vue3则通过proxy进行   改为proxy后,可以突破vue当前的…

面向对象的五大基本原则

一、单一职责原则 一个类&#xff0c;最好只做一件事&#xff0c;只有一个引起它的变化。单一职责原则可以看做是低耦合、高内聚在面向对象原则上的引申&#xff0c;将职责定义为引起变化的原因&#xff0c;以提高内聚性来减少引起变化的原因。 二、开放封闭原则 软件实体应…

2312d,d的10月会议

原文 拉兹万 Razvan从他最近在内联中遇见的一个问题开始,他不知道如何解决.一般,当A模块导入B模块并从B调用函数时,如果B的目标文件没有传递给链接器,则最终会出现链接器错误. 如,在命令行上使用A.d编译并省略B.d时.但是,当内联调用函数时,则不会触发链接器错误.他怀疑这是一…

LVS那点事

LVS 原理 IPVS LVS 的 IP 负载均衡技术是通过 IPVS 模块来实现的&#xff0c;IPVS 是 LVS 集群系统的核心软件&#xff0c;它的主要作用是&#xff1a;安装在 Director Server 上&#xff0c;同时在 Director Server 上虚拟出一个 IP 地址&#xff0c;用户必须通过这个虚拟的…

数据挖掘与知识发现:解析关键概念

目录 1. 引言 1.1 背景 1.2 意义与应用 2. 数据挖掘的基本概念 2.1 定义与范畴 2.1.1 数据挖掘的定义 2.1.2 数据挖掘的范畴 2.2 数据挖掘过程 2.2.1 问题定义 2.2.2 数据采集与清洗 2.2.3 特征选择 2.2.4 模型构建 2.2.5 模型评估与验证 2.2.6 模型部署 2.3 数…

【ROS2】MOMO的鱼香ROS2(二)ROS2入门篇——ROS2初体验

ROS2初体验 引言专业术语认识1 认识ROS21.1 ROS2版本对照表1.2 ROS与ROS2对比1.3 ROS2架构1.3.1 DDS实现层1.3.2 ROS中间件接口&#xff08;RMW&#xff09;1.3.3 ROS2客户端库 RCL 2 安装ROS22.1 ROS安装&#xff08;一键式&#xff09;2.2 手动安装ROS22.2.1 添加ROS软件源2.…

电商大数据商品采集:阿里巴巴1688电商网站货源产品信息采集

商品详情大数据采集:阿里巴巴1688电商网站货源产品信息采集 ------------- 数据采集满足多种业务场景&#xff1a;适合产品、运营、销售、数据分析、政府机关、电商从业者、学术研究等多种身份 职业。 舆情监控&#xff1a;全方位监测公开信息&#xff0c;抢先获取舆论趋势。 市…

MP4容器结构英文缩写及英文全称(box结构、atom结构、MP4结构)

文章目录 MP4容器结构 参考文章&#xff1a;详解视频封装格式之MP4 MP4容器结构 MP4文件格式是一个复杂的层级结构&#xff0c;下面列出了一些常见的容器及其英文全称和中文标注&#xff0c;方便查阅&#xff1a; ftyp (File Type Box)&#xff1a;文件类型盒子moov (Movie B…

java虚拟机内存管理

文章目录 概要一、jdk7与jdk8内存结构的差异二、程序计数器三、虚拟机栈3.1 什么是虚拟机栈3.2 什么是栈帧3.3 栈帧的组成 四、本地方法栈五、堆5.1 堆的特点5.2 堆的结构5.3 堆的参数配置 六、方法区6.1 方法区结构6.2 运行时常量池 七、元空间 概要 根据 JVM 规范&#xff0…

工具--Git详解

在当今的数字时代&#xff0c;版本控制系统已成为开发人员和团队之间协作的重要工具。其中&#xff0c;Git是最受欢迎的版本控制系统之一。它不仅在软件开发中广泛使用&#xff0c;还被应用于许多其他领域。在这篇博客中&#xff0c;我们将深入了解Git的工作原理、基本命令以及…

vue对日期的年、月、日进行增加,转换成指定格式的字符串(yyyy-MM-dd)

let date new Date(2023-12-28); //当前日期 let startYear date.getFullYear(); // 年 let startMonth date.getMonth() 1; // 月 年 let addYear 3; date.setFullYear(startYear Number(addYear )); endDate this.formatDate(date); 月 let addMonth 3; let endMonth…

在Spring Cloud中使用Ribbon完成一个简单的负载均衡demo

Spring Cloud系列断更了有一段时间了&#xff0c;这段时间最近都在忙着项目上的事&#xff0c;天天修复bug以及调整需求&#xff0c;反正各种操劳&#xff0c;了解业务需求&#xff0c;然后开发相关功能&#xff0c;很久都没碰Spring Cloud系列的相关文章了&#xff0c;最近回头…

《Linux Nano命令详解:小而强大的文本编辑器》

《Linux Nano命令详解&#xff1a;小而强大的文本编辑器》 引言&#xff1a; 在Linux系统中&#xff0c;文本编辑是开发和系统管理中不可或缺的一部分。虽然有许多强大的文本编辑器可供选择&#xff0c;但Nano以其简单易用、小巧灵活而备受喜爱。本文将深入探讨Nano命令&…

C动态内存分配与释放介绍

介绍 C语言中的动态内存分配与释放主要通过malloc和free这两个函数来实现。 malloc函数&#xff1a; malloc函数用于在程序运行时动态地从堆&#xff08;heap&#xff09;中分配一块指定大小的内存空间。其函数原型如下&#xff1a; void* malloc(size_t size);参数&#xff1…

Android 万能的RecyclerView适配器(BaseRecyclerViewAdapterHelper)

引用&#xff1a; implementation "io.github.cymchad:BaseRecyclerViewAdapterHelper4:4.1.2" BaseQuickAdapter 基本使用&#xff1a; 快速使用 class TestAdapter : BaseQuickAdapter<Status, TestAdapter.VH>() {// 自定义ViewHolder类class VH(parent: V…

亲爱的程序猿们,元旦快乐!

新年祝福 在这个充满欢笑和祝福的日子里&#xff0c;我想对你们说&#xff1a; 新的一年&#xff0c;愿你们像代码一样充满逻辑&#xff0c;像算法一样追求高效&#xff0c;像编程语言一样多样化&#xff01; 2024年即将到来&#xff0c;预测几个行业趋势&#xff1a; 人工…