状态管理bus的使用

父子组件通信

父组件向子组件传值一定是通过属性，而子组件向父组件传值一定是通过事件的方式

v-model语法糖

v-modal是一个语法糖，相当于如下的写法：

使用bus通信

兄弟组件通信：


那么如果时跨文件的组件通信呢？我们就用到了bus：

注入bus

然后在其中一个组件传入参数

另一个组件进行接收

bus的原理就是通过$emit来触发事件，通过$on来监听这个事件，从而进行组件之间的通信

状态管理Vuex（一）

vuex原理图

基本配置

state和getter

可以在任何地方使用state中的属性

getter


也可以使用mapgetters

辅助函数的使用

也可以用mapState来进行赋值

模块中的state和getter的使用

模块中的getter

使用命名空间时辅助函数的使用

如果使用了命名空间：


此时使用模块中的数据的时候就只需要state点就可以了

状态管理Vuex（二）

mutation

通过mutation更新数据


一个参数的写法

mutation添加数据

注意：一开始没有的数据是不会添加get和set方法的，需要所以直接赋值时没用的，需要调用vue的set方法。
mapMutation的使用：

模块中的使用：


可以看到在模块中定义的可以直接拿来用，不需要进行模块的区分，但是如果给这个模块加上命名空间的话，就需要在调用的时候加上命名空间的名字了。

action

mutation只能做一些同步的操作，一些异步的操作需要放到action里面去

这里用到了解构赋值

也可以用this.$store.dispatch来触发更新

module

当项目非常大的时候就要进行模块的拆分

可以通过rootState进行根节点state的获取。
注册模块：

使用的时候需要做出判断：

为模块添加子模块则需要使用数组的形式：

在action调用接口实操

action之间可以通过dispatch相互触发：

async/await使用

将上述的请求改成async和await的方式

状态管理Vuex进阶

Vuex插件的开发与使用

当浏览器刷新的时候，store中的内容会被刷新，因为它时存在内存中的，不是存在本地的。我们希望有内容能存在本地，就要定义一个存储的插件，在store初始化的时候如果local中有store则做替换，每次mutation都把更新的值存下来：

使用插件：

严格模式

严格模式是在开发的时候对规范的要求，将strict设置为true即开启了严格模式。在严格模式下，我们必须要通过commit mutation的形式才能修改store中的值，不能直接进行赋值（能成功，但是页面会报错）。

可以设置在开发环境下会报错，生产环境不会

Vuex+双向绑定

我们都知道v-model是一个语法糖，那么将store中的数据直接用到v-model中则很明显会产生问题,因为修改值不能直接去修改，必须要通过提交mutation进行修改

将v-model做拆分


如果还是要v-model的写法呢？将state从mapState中取出来，单独定义它的set和get方法

Lison《vue技术栈开发实战》（二）相关推荐

1. Lison《vue技术栈开发实战》（一）

   Lison<vue技术栈开发实战>(一) 第01章 使用vue-cli3创建项目 使用Vue UI创建.管理项目 项目结构目录整理 初始文件添加 基本配置详解 使用代理解决跨域 第02章 ...

2. Lison《vue技术栈开发实战》（三）

   Lison<vue技术栈开发实战>(三) Ajax请求实战 解决跨域问题 封装axios 请求拦截 响应拦截 队列管理 使用Mock模拟Ajax请求 响应模拟 Mock用法精讲 数据模板 ...

3. Lison《vue技术栈开发实战》（四）

   Lison<vue技术栈开发实战>(四) 从SplitPane组件谈Vue中"操作"DOM 简单两列布局 如何让两个div改变宽度 鼠标拖动效果 v-model和.sy ...

4. 《Spring Boot+Vue全栈开发实战》读书笔记

   写在前面 嗯,回家处理一些事,所以离职了,之前的公司用开源技术封装了一套自己的低代码平台,所以之前学的spring Boot之类的东西都忘了很多,蹭回家的闲暇时间复习下. 笔记整体以 Spring B ...

5. 读书笔记《Spring Boot+Vue全栈开发实战》(下)

   本书将带你全面了解Spring Boot基础与实践,带领读者一步步进入 Spring Boot 的世界. 前言 第九章 Spring Boot缓存 第十章 Spring Boot安全管理 第十一章 S ...

6. ehcache springboot_阿里内部进阶学习SpringBoot+Vue全栈开发实战文档

   前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置烦琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...

7. Spring Boot+Vue全栈开发实战——花了一个礼拜读懂了这本书

   很幸运能够阅读王松老师的<Spring Boot+Vue全栈开发实战>这本书!之前也看过Spring Boot与Vue的相关知识,自己也会使用了Spring Boot+Vue进行开发项目. ...

8. 《SpringBoot+vue全栈开发实战项目》笔记

   前言 Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置繁琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能 ...

9. SpringBoot+vue全栈开发实战笔记太香了

   Spring 作为一个轻量级的容器,在JavaEE开发中得到了广泛的应用,但是Spring 的配置繁琐臃肿,在和各种第三方框架进行整合时代码量都非常大,并且整合的代码大多是重复的,为了使开发者能够快速 ...

最新文章

1. exgcd ---- 2020牛客多校第三场：[Fraction Construction Problem：exgcd+思维题]
2. 大数据时代：从1.0到3.0 | 专访清华社会学系教授罗家德
3. VS2008和VS2012怎么进行Debug模式和Release模式的切换
4. MS的.net源码地址
5. 跨域请求获取Solr json检索结果并高亮显示
6. Flutter入门篇（一）
7. web项目开发人员配比_我如何找到Web开发人员的第一份工作
8. JSP九大内置对象和四大作用域和Servlet的三大作用域对象
9. 【数据结构与算法基础】二叉树
10. 杨老师课堂之ArrayList集合常用方法解析
11. Makefile变量
12. 容器技术Docker K8s 47 服务网格（ASM）-阿里云服务网络概述
13. Report Machine（RM）报表控件简单用法-delphi
14. 计算机图形学 ：中点画圆法
15. springboot+java农家乐系统-住宿-美食-活动vue
16. 年薪达 35 万元，杭州成为薪酬最高的城市，北上、重庆通勤时间最久，揭晓 2022 年最具潜力的软件名城！
17. 写题记录 cf G. Minimal Coverage 难度2200
18. girl_noise.jpg恢复去噪
19. 完全k叉树（CCPC－Wannafly Comet OJ 夏季欢乐赛（2019） A）
20. 如何写一个简单的手写识别算法？

热门文章

1. Zookeeper（动物园管理员）为什么需要他？分布式协调系统
2. 两个月复习一鼓作气拿下CISM
3. hci css是什么,2018年1月-11月11日外语学院论文被SSCI和AHCI收录情况
4. python控制多台手机_Airtest操作多台云手机,进行分发,多个脚本后端调度
5. Python编曲实践（十一）：通过PyQt5和PyGame开发的简易MIDI电钢琴，支持键盘控制、基础存储、音符可视化及调性提示等功能
6. DS18B20读取温度，序号匹配
7. js新浪下拉菜单 pink
8. 2022最新 VSCode + LaTex 环境搭建、问题解决
9. 关于博途螺旋线参数方程
10. Unity Shader 学习笔记（一）关于“表面着色器”切换渲染管线Shader不可用的问题