vueX基础知识笔记
接着昨天的知识点
mutations提交时,有时候达不到想要的响应式,我们必须要将数据提前放到state中,否则不会达到响应式的效果。比如
state.info['address'] = value //此方式,虽然通过devtools数据追踪到已经添加数据,但是没有渲染,没有达到响应式,为解决这个问题我们可以这样
vue.set($store.state.info,'address','beijing') // 通过这样我们就加了一个address:beijing的属性,而且达到响应式
delete state.name //此方式,虽然devtools数据已经删除,但是渲染的地方不会消失,没有达到响应式。这时
vue.delete($store.state,'name') //这样我们就将state中的name删除了
下面我们介绍actions
从这样图中我们可以看出 组件--->用dispatch给actions--->actions通过commit---->mutations---->修改数据----->rander渲染组件,这是一个循环过程
然而mutations只接受同步操作,devtools工具才能追踪到我们的数据,所以就有了actions,这是专门处理异步操作的,通过组件使用dispatch给actions然后通
过actions中使用commit达到间接操作mutations的效果去修改数据。注意我们有一些异步操作的时候,一定要按照流程走,否则devtools工具无法追踪数据。
这里有个小的知识点,就是当我们在actions进行异步操作的时候,我们组建想要知道是否已经执行成功或者失败,这时候我们可以返回一些信息告知用户
actions片段
aUpDate(context, pyload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit("update", pyload)
console.log(pyload.message);
resolve('成功接收消息')
}, 2000)
})
}
组件片段
<button @click="change">change</button> change(){
this.$store.dispatch("aUpDate",{
message:"我是携带的信息",
sucess:()=>{}
}).then((data)=>{
console.log(data);
})
}
看看代码能不能看懂?
用这个函数去返回一个promise对象,得到成功时的转态resolve(‘成功接受消息’),然后在组件后使用.then方法,并且答应resolve中携带的信息。
这就是actions基本用法了
这时候就剩下我们的modules了,
哪什么是modules呢?modules简单的来说,它就是避免vuex中state中的数据随着项目的逐渐变大,会显得十分臃肿,所以就开辟了modules来分模块管理数据,modules中的每一个属性就对应一个模块,每一个模块中包括state,mutations,getters,actions,modules 说这么多,那是怎么分模块的呢?上代码可能会理解的更清楚
moduleA={
state:{
name:"kobe"
},
mutations:{},
getters{},
actions:{},
modules:{}
}
new Vuex.store({
state:{},
mutations:{},
getters{},
actions:{},
moudles{
key1: moduleA
})
这样是否是不是get到了一点呢?如果还没有咱们再往下看吧
获取数据
$store.state.key1.name //就访问到了moudelA中的name了
getters:
1. 事件类型(state){return state.name}
2. 事件类型(state,getters){return getters.事件类型}
3. 事件类型 (state,getters,rootState){return rootState.name}
1. 返回moduleA中的name
2. 返回moduleA中getters中的事件类型
3. 返回根的state.name
(假设数据都存在,以上的例子)
mutations:
this.$store.commit("事件类型",pyload) //给mutations
actions:
this.$store.dispatch("事件类型",pyload) //给actions
actions:
事件类型(context,pyload){
settimeout(()=>{
context.commit("事件类型",pyload) //给mutations
})
这样就相当间接操作mutations去改变moudles中的state了
最后一个我们不要再解释了吧,要是还要解释,估计我得解释一辈子。大家有什么建议,随时可以跟我留言哦,我们在学习的路上,可以互相学习,互相进
步。
}
vueX基础知识笔记的更多相关文章
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
- Java多线程基础知识笔记(持续更新)
多线程基础知识笔记 一.线程 1.基本概念 程序(program):是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程(process):是程序的一次执行过程,或是 ...
- javascript基础知识笔记-自用
笔记内容根据个人基础知识不足不明白之处做的记录.主要看的:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 1.变量,变量的名字又叫标识符 ...
- Mysql之基础知识笔记
Mysql数据库基础知识个人笔记 连接本地数据库: mysql -h localhost -u root -p 回车输入数据库密码 数据库的基础操作: 查看当前所有的数据库:show database ...
- java基础知识-笔记整理
1.查看已安装jdk文件路径 CMD输入java -verbose. 2.java学习提升路线 java学习视屏地址: http://www.icoolxue.com/album/show/38 ...
- JavaScript基础知识笔记
做前端几年了,一直疏于整理归纳,所以这两天把基础看了一遍,加上使用经验,整理了基础知识中关键技术,旨在系统性的学习和备忘.如果发现错误,请留言提示,谢谢! 重要说明:本文只列举基础知识点,中级和高级内 ...
- Javascript 基础知识笔记
标签(空格分隔): 廖老师学习笔记 javascript 基本入门 根据廖雪峰老师官网,自己看后的简单笔记 第一小节 基本知识 <script type="text/javascrip ...
- 初学MySQL基础知识笔记--01
本人初入博客园,第一次写博客,在今后的时间里会一点点的提高自己博客的水平,以及博客的排版等. 在今天,我学习了一下MySQL数据库的基本知识,相信关于MySQL的资料网上会有很多,所以我就不在这里复制 ...
- mysql基础知识笔记
Mysql基础笔记 环境配置 基本概念 mysql命令行 进入 use show 查询 select order by where like 数据过滤regexp concat 文本函数 日期函数 数 ...
随机推荐
- Java实现 LeetCode 55 跳跃游戏
55. 跳跃游戏 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] ...
- Java实现 LeetCode 37 解数独
37. 解数独 编写一个程序,通过已填充的空格来解决数独问题. 一个数独的解法需遵循如下规则: 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出现一次. 数字 1-9 在每一个以粗实 ...
- Java实现蓝桥杯G将军
G将军有一支训练有素的军队,这个军队除开G将军外,每名士兵都有一个直接上级(可能是其他士兵,也可能是G将军).现在G将军将接受一个特别的任务,需要派遣一部分士兵(至少一个)组成一个敢死队,为了增加队员 ...
- linux下使用tcpdump抓包分析tcp的三次握手
首先贴上tcp 三次握手的原理图服务器开启ftp服务并执行tcpdump抓包服务器:192.168.3.14 ftp服务客户端:192.168.3.100 服务器执行以下命令,客户端访问服务器ftp: ...
- Java设计模式之亨元模式
之前在项目中接触过亨元模式这一种设计模式,当时因为项目赶进度,因此只不过是大概的了解了一下,刚好今天有时间,就写一篇博客详细的学习一下亨元模式. 一.概念 运用共享技术有效的支持大量细粒度的对象.(来 ...
- nginx下通过子路径配置多个vue单页应用的方法
千辛万苦在Stack Overflow上找来的,记下吧. https://stackoverflow.com/q/31519505/13651734 我的需求是 首页:/ 项目a:/aaa 项目 b: ...
- linux中c多线程同步方法
https://blog.csdn.net/jkx01whg/article/details/78119189 Linux下提供了多种方式来处理线程同步,最常用的是互斥锁.条件变量和信号量. 一.互斥 ...
- Python 3中,import win32com.client 出错
在 import win32com.client 时,出现了界面: Traceback (most recent call last): File "<pyshell#1>&qu ...
- .net core3.1 abp动态菜单和动态权限(动态菜单实现和动态权限添加) (三)
我们来创建动态菜单吧 首先,先对动态菜单的概念.操作.流程进行约束:1.Host和各个Tenant有自己的自定义菜单2.Host和各个Tenant的权限与自定义菜单相关联2.Tenant有一套默认的菜 ...
- @atcoder - AGC008E@ Next or Nextnext
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 N 的序列 a,问有多少排列 p,满足对于每一个 ...