第四十一章 Vue之初识VueX

目录

一、引言

1.1. vuex的概念

1.2. vuex使用场景

1.3. 优势

二、创建演示项目

2.1. 构建项目步骤

2.2. 项目最终生成结构

2.3. 创建项目文件

2.3.1. App.vue 

2.3.2. Son1.vue

2.3.3. Son2.vue

三、创建一个空仓库

3.1. 安装vuex

3.2. 新建仓库

3.3. 挂载仓库

3.4. 完整代码

3.4.1. main.js

3.4.2. index.js

四、提供/访问vuex数据

4.1. 提供数据

4.2. 使用数据

4.2.1. 通过 store 直接访问

4.2.2. 通过辅助函数 (简化)


一、引言

1.1. vuex的概念

vuex 是一个 vue 的 状态管理工具,在我们的开发过程中,状态本质上就是数据。vuex 相当于是一个插件,可以帮我们管理 vue 通用的数据 (多组件共享的数据)。

1.2. vuex使用场景

① 某个状态在很多个组件中使用 (如个人信息)

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

1.3. 优势

① 共同维护一份数据,数据集中化管理。

② 支持响应式变化

③ 操作简洁 (vuex提供了一些辅助函数)

二、创建演示项目

基于VueCli脚手架,构建一个vuex[多组件数据共享]的演示案例项目,该项目的演示效果是三个组件, 共享一份数据:

1. 任意一个组件都可以修改数据

2. 三个组件的数据是同步的

2.1. 构建项目步骤

 

 

2.2. 项目最终生成结构

2.3. 创建项目文件

2.3.1. App.vue 

<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 () {return {}},components: {Son1,Son2}
}
</script><style></style>

2.3.2. 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>

2.3.3. 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>

三、创建一个空仓库

注:版本vue2安装的vuex版本为3,版本vue3安装的vuex版本为4

3.1. 安装vuex

yarn add vuex@3

3.2. 新建仓库

创建 store/index.js 专门存放 vuex

配置使用vuex Vue.use(Vuex)

创建仓库 new Vuex.Store()

3.3. 挂载仓库

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

3.4. 完整代码

3.4.1. main.js

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

3.4.2. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库(空仓库)
const store = new Vuex.Store()// 导出给main.js使用
export default store

四、提供/访问vuex数据

4.1. 提供数据

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

在 state 对象中可以添加我们要共享的数据。

4.2. 使用数据

4.2.1. 通过 store 直接访问

 

4.2.2. 通过辅助函数 (简化)

mapState是辅助函数,帮助我们把 store中的数据 自动 映射到 组件的计算属性中,其功能如同下列代码:

import { mapState } from 'vuex'  

mapState(['count'])

computed: {

...mapState(['count'])

}

标准使用方法:

 

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

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

相关文章

gitlab-development-kit部署gitlab《二》

gitlab-development-kit部署gitlab《一》 环境 mac 12.7.4 xcode 14.2 gdk 0.2.16 gitlab-foss 13.7 QA xcode源码安装 # https://crifan.github.io/xcode_dev_summary/website/xcode_dev/install_xcode/ # https://xcodereleases.comopenssl1.1 源码安装 # https://open…

编程之路,从0开始:内存函数

Hello大家好&#xff01;很高兴我们又见面了。 给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 今天我们来讲C语言中的内存函数。 目录 1、memcpy内存复制 2、memmove可重叠内存拷贝 3、memset设置字符 4、memcmp比较 1、memcpy内存复制 memcpy就是内存复制…

【C语言】值传递和地址传递

值传递 引用传递&#xff08;传地址&#xff0c;传引用&#xff09;的区别 传值&#xff0c;是把实参的值赋值给行参 &#xff0c;那么对行参的修改&#xff0c;不会影响实参的值。 传地址&#xff0c;是传值的一种特殊方式&#xff0c;只是他传递的是地址&#xff0c;不是普通…

摘要与登记

10.15:mysql 10.16:redis, 10.17:k8s,netty,dubbo,设计模式 10.18:juc、 10.21:rabbitMQ、ElasticSearch 10.22:docker 10.23:k8s 10.24:springsecurity 10.30:spring事务 11.01:mysql 11.05:redis 11.06:k8s 11.07:netty、docker 11.08:设计模式 11.09:juc 11.11:rabbitMQ、sp…

Springboot采用jasypt加密配置

目录 前言 一、Jasypt简介 二、运用场景 三、整合Jasypt 2.1.环境配置 2.2.添加依赖 2.3.添加Jasypt配置 2.4.编写加/解密工具类 2.5.自定义加密属性前缀和后缀 2.6.防止密码泄露措施 2.61.自定义加密器 2.6.2通过环境变量指定加密盐值 总结 前言 在以往的多数项目中&#xff0…

axios平替!用浏览器自带的fetch处理AJAX(兼容表单/JSON/文件上传)

fetch 是啥&#xff1f; fetch 函数是 JavaScript 中用于发送网络请求的内置 API&#xff0c;可以替代传统的 XMLHttpRequest。它可以发送 HTTP 请求&#xff08;如 GET、POST 等&#xff09;&#xff0c;并返回一个 Promise&#xff0c;从而简化异步操作 基本用法 /* 下面是…

贪吃蛇小游戏设计

贪吃蛇小游戏 1.引言1.1 背景1.2 目的1.3 意义1.4 任务1.5 技术可行性分析1.5.1执行平台1.5.2 语言特性与功能方面 2.需求分析2.1 环境需求2.2开发环境分析2.3游戏功能分析2.4 游戏性能分析2.5 数据流图2.6 数据字典 3.概要设计3.1 设计思路3.2 游戏界面设计3.3 总设计模块的划…

go T 泛型

目录 1、类型约束 2、泛型函数 3、泛型结构体 4、泛型接口 5、以接口作为类型约束 关键词&#xff1a;泛型、类型参数、类型约束 Go 语言在 1.18 版本引入了泛型&#xff08;Generics&#xff09;特性&#xff0c;可以编写更通用、可复用的代码&#xff0c;泛型可以用于&a…

如何处理 iOS 客户端内 Webview H5 中后台播放的音视频问题

目录 问题描述Page Visibility API 的应用什么是 Page Visibility API&#xff1f;使用 Page Visibility API 暂停音视频完整解决方案1. 监听媒体的播放和暂停事件2. 防止自动播放3. 结合 Intersection Observer 进行媒体控制4. 手动处理应用生命周期中的事件 问题描述 在 iOS…

Matplotlib库中show()函数的用法

在Matplotlib库中使用show()函数是用于显示绘制的图形的函数。它将图形显示在屏幕上或保存到文件中。show()函数通常在绘制完图形后调用。 Matplotlib是一个用于绘制2D图形的Python库&#xff0c;它提供了丰富的绘图工具和函数&#xff0c;可以用于创建各种类型的图表&#xf…

DNS面临的4大类共计11小类安全风险及防御措施

DNS在设计之初&#xff0c;并未考虑网络安全限制&#xff0c;导致了许多问题。DNS安全扩展(DNSSEC)协议的开发旨在解决DNS的安全漏洞&#xff0c;但其部署并不广泛&#xff0c;DNS仍面临各种攻击。接下来我们一起看下DNS都存在哪些安全攻击及缓解措施&#xff0c;旨在对DNS安全…

蓝队知识浅谈(中)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;蓝队基础之网络七层杀伤链_哔哩哔哩_bilibili 本文主要分享一些蓝队相关的知识。 一、网络杀伤链 网络杀伤链&#xff08;Cyber Kill Chain&…

vue2在el-dialog打开的时候使该el-dialog中的某个输入框获得焦点方法总结

在 Vue 2 中&#xff0c;如果你想通过 ref 调用一个方法&#xff08;如 inputFocus&#xff09;来聚焦一个输入框&#xff0c;确保以下几点&#xff1a; 确保 ref 的设置正确&#xff1a;你需要确保在模板中正确设置了 ref&#xff0c;并且它指向了你想要操作的组件或 DOM 元素…

【大数据学习 | flume】flume的概述与组件的介绍

1. flume概述 Flume是cloudera(CDH版本的hadoop) 开发的一个分布式、可靠、高可用的海量日志收集系统。它将各个服务器中的数据收集起来并送到指定的地方去&#xff0c;比如说送到HDFS、Hbase&#xff0c;简单来说flume就是收集日志的。 Flume两个版本区别&#xff1a; ​ 1&…

Jmeter中的定时器(一)

定时器 1--固定定时器 功能特点 固定延迟&#xff1a;在每个请求之间添加固定的延迟时间。精确控制&#xff1a;可以精确控制请求的发送频率。简单易用&#xff1a;配置简单&#xff0c;易于理解和使用。 配置步骤 添加固定定时器 右键点击需要添加定时器的请求或线程组。选…

网络基础协议理论(DNS协议)

DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议是互联网的一项核心应用层协议&#xff0c;以下是对DNS协议的详细简述&#xff1a; 一、DNS协议的基本功能 DNS协议的主要功能是将人类易读的域名&#xff08;如www.example.com&#xff09;转换成计算…

Webkit 滚动条样式属性

Webkit 滚动条样式属性 ::-webkit-scrollbar – 整个滚动条 ::-webkit-scrollbar-track – 滚动条的滚动区域&#xff08;轨道&#xff09; ::-webkit-scrollbar-thumb – 滚动条的可拖拽部分&#xff08;滑块&#xff09; 以下是可用但不常用的属性&#xff1a; ::-webkit…

区块链技术在慈善捐赠中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 区块链技术在慈善捐赠中的应用 区块链技术在慈善捐赠中的应用 区块链技术在慈善捐赠中的应用 引言 区块链技术概述 定义与原理 发…

[数组二分查找] 0074. 搜索二维矩阵

文章目录 1. 题目链接2. 题目大意3. 示例4. 解题思路5. 参考代码 1. 题目链接 74. 搜索二维矩阵 - 力扣&#xff08;LeetCode&#xff09; 2. 题目大意 描述&#xff1a;给定一个 mn 大小的有序二维矩阵 matrix。矩阵中每行元素从左到右升序排列&#xff0c;每列元素从上到下…

父组件给子组件明明传的是字符串,为什么总是报错说传的是对象呢?原因如下:

// 接收父组件传过来的信息&#xff08;评论内容&#xff09; props: { item: { type: Object, //item为对象类型 item.user_id[0]._idthis.dengluzheID default () { return { } } …