vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么
VUE项目爬坑---6、vuex的真正存在的意义是什么
一、总结
一句话总结:
a、【避免低效的数据传递】:当多个组件嵌套的时候,只能父子传递,那么中间的组件只能做传递数据之用,数据不是它用,它却传递数据,这样不合理
b、【管理组件状态】:vuex可以让多个组件很方便的获取和管理状态
1、提交 Mutations,分发 Action?
提交 Mutations:store.commit('increment')
分发 Action:store.dispatch('increment')
2、vuex中action、mutations、state和外部调用的关系?
vuex中action操作mutations,mutations操作state,外部就dispatch action
3、我们可以import引入模块,那肯定是文件里面export了?
我们可以import引入模块,那肯定是文件里面export了,无论是常用的组件比如vue,还是我们简单的变量
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import {ADD_TODO, DELETE_TODO, SELECT_ALL_TODOS, DELETE_COMPLETE_TODOS} from './mutation-types'
4、js让字符串变成变量?
可以加中括号,例如[DELETE_TODO] (state, {index}) {state.todos.splice(index, 1)}
/*
包含n个用于直接更新状态的方法的对象模块
*/
import {ADD_TODO, DELETE_TODO, SELECT_ALL_TODOS, DELETE_COMPLETE_TODOS} from './mutation-types'
export default {
[ADD_TODO] (state, {todo}) { // 方法名不是ADD_TODO, 而是add_todo
state.todos.unshift(todo)
},
[DELETE_TODO] (state, {index}) {
state.todos.splice(index, 1)
},
[SELECT_ALL_TODOS] (state, {isCheck}) {
state.todos.forEach(todo => todo.complete = isCheck)
},
[DELETE_COMPLETE_TODOS] (state) {
state.todos = state.todos.filter(todo => !todo.complete)
}
}
5、从后台ajax来的数据,都可以用watch来监控?
用watch监控之后后台ajax来的数据之后,这样数据一旦获取,就可以通过watch来更新
6、vue的watch中还有深度监视?
设置监视属性的deep为true
watch:{//监视todos的所有变化
todos:{
deep:true,//深度监视
handler:storageUti1.saveTodos//保存todos 到Localstoragd
}
}
7、vuex中的module(模块化)?
各个状态管理可以分模块,对大应用很方便,一个模块里面就是一套的state、mutations、actions、getters
二、内容在总结中
博客对应课程的视频位置:
vuex modules ajax,VUE项目爬坑---6、vuex的真正存在的意义是什么相关推荐
- 【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑(一)
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...
- html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
- 改造ie老项目爬坑之showModalDialog
改造ie老项目爬坑之showModalDialog 业务场景 公司的老项目都是使用的window.showModalDialog()这种方式实现的打开窗口,并且项目里的提示语均使用的alert和con ...
- kotlin与java混合开发_使用kotlin和Java混合开发Android项目爬坑记录
使用kotlin和Java混合开发Android项目爬坑记录 不定期将开发过程中遇到的问题添加在此处,加深记忆. 主要内容包括但不限于java与kotlin语言的一些区别,以及在使用android-s ...
- html2canvas在Vue项目踩坑-生成图片偏移不完整
背景 最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
- Vue2.0高仿饿了么核心模块移动端Web App项目爬坑(一)
原文https://www.cnblogs.com/ljq66/p/9980372.html 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知 ...
- Insightface项目爬坑指南+使用本地数据集训练流程(MXNET版)
其实半年多前就已经把insightface训练等一系列环节弄熟了,不得不说IBUG组的这个模型确实是开源界的翘楚,但是还是存在一些问题在某些程度上和商汤云从等大厂存在一点差距,这不妨碍大部分人日常人脸 ...
- VS2017+VUE创建项目爬坑
以下内容适用于一直在用VS做项目,突然接到vue.js需要使用VSCode并且不想用的旁友. 在开始之前,需要安装Node.js编辑器,可以参考这篇文章,这里不再赘述. https://blog.cs ...
- SSR门户项目爬坑之路(一)
说到门户项目一般都会考虑到服务端渲染,即SSR,以及前台和后台管理之类的事情,下面就是我们门户项目的开发过程:门户前台项目: 项目架构搭建:这里我们使用vue的nuxt来创建项目 确保安装了npx(n ...
最新文章
- download WM6.5.3 SDK
- C++扬帆远航——3(打印图形)
- OpenCV 击中或没打中 Hit-or-Miss/Hit-and-Miss
- NYOJ176 整数划分(二)
- python高手之路第三版_《Python高手之路(第3版)》——1.3 版本编号-阿里云开发者社区...
- java编程需要数学知识吗_初学Java编程,需要英语和数学基础吗?
- [转]Ubuntu 常用快捷键10个
- 关于label在ie8,9下的兼容问题???
- 腾讯回应租号打游戏:已向超20家账号交易平台发函
- web安全这个行业的前景怎么样?
- Golang爬取网页数据时403
- mifare classic 2.2.3中文_西班牙人为什么学中文?他们是这么说的……
- android 6.0 ndk版本,[推荐]android-ndk6.0翻译(1)
- zscore标准化步骤_几种常用数据标准化方法
- 计算机没有autoCAD_《AutoCAD三维设计环境》
- 北大计算机考研复试线,北京大学计算机考研分数线及报录比
- 下载和安装Tcl/Tk:
- java 通过 冰蓝 word 转pdf ,最大程度包装pdf 样式和word接近
- 文件cpy改进,文件加密,对文件两次运算可解密,密码65
- getValue()方法 java_【Java 】实用方法