计算机网络
-
HTTP 缓存
-
你知道 302 状态码是什么嘛?你平时浏览网页的过程中遇到过哪些 302 的场景?
-
HTTP 常用的请求方式,区别和用途?
-
HTTPS 是什么?具体流程
-
三次握手和四次挥手
-
你对 TCP 滑动窗口有了解嘛?
-
WebSocket与Ajax的区别
-
了解 WebSocket 嘛?
-
HTTP 如何实现长连接?在什么时候会超时?
-
TCP 如何保证有效传输及拥塞控制原理。
-
TCP 协议怎么保证可靠的,UDP 为什么不可靠?
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
算法
-
链表
-
字符串
-
数组问题
-
二叉树
-
排序算法
-
二分查找
-
动态规划
-
BFS
-
栈
-
DFS
-
回溯算法
目录
知识不足的地方赶快点击学习呦~~~
Vuex入门(一)—— state,mapState,…mapState对象展开符详解
Vuex入门(二)—— mutations详解
Vuex入门(三)—— getters,getters,…getters对象展开符详解
Vuex入门(四)—— action和…mapActions详解
Vuex入门(五)—— 封装module全网最全详解(带源码)
Vuex入门(六)——mapState, mapGetters, mapMutations, mapActions全网最全详解终结篇(带源码)
Vuex官网:https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store
Vuex总结:
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex
Mutation和Action对比总结:
1.Mutation是同步的,Action是异步的;
2.Mutation是直接变更状态,Action提交的是mutation;
3.Actions和Mutation 都支持载荷方式和对象方式进行分发。
页面组件触发action方法:
methods: {
// 第一种写法 常规触发
// increment() {
// this.$store.dispatch("add"); // 调用action里面方法 语法:this.$store.dispatch("XXX"); xxx 为action自定义函数名 触发方法
// },
// decrement() {
// this.$store.dispatch("reduce");
// },
// 第二种写法mapActions
// import { mapActions } from 'vuex' // 别忘记引入哦~~~js
// (1)写法
// ...mapActions([
// 'increment' ,// 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` 想要这样缩写写前提store.js里面action里面函数名和绑定class名字相同才可以
// 'decrement'
// ])
// (2)写法
...mapActions({
increment: 'add', // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
decrement:'reduce'
}),
},
action概念:
1.store.js里面action需要的参数
(1)Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
(2)action类似于mutation,不同的是Action提交的是mutation,而不是直接变更状态,而且action里可以包含任意异步操作,每个mutation的参数1是一个对象,可以包含如下六个属性:
commit —————— 当前命名空间对应的commit
dispatch —————— 当前命名空间对应的dispatch
state —————— 当前命名空间对应的state
getters —————— 当前命名空间对应的getters
rootState —————— 根模块的state
rootGetters —————— 根模块的getters
2.XX.vue调用action触发方法 语法:this.$store.dispatch(“reduce”) reduce为action自定义函数名
不能直接调用一个action,而是通过 store.dispatch来调用,dispatch可以带两个参数,如下:
type ———— 对应的action名
payload ————传入的参数
一.store.js
这里使用了 Promise ,在 1 s 后提交了 mutations 中定义的 increment 递增函数。
它是 ES6语法,
有三种状态:
Pending 进行中
Resolved 已完成
Rejected 失败
传参数action第一种(context) 第二种({commit,dispatch ,state })
代码:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1,
},
mutations: { // 类似于计算属性 computed
increment(state) { // 把上面state对象当参数传入,取对象里面的进行操作
state.count++
},
decrement(state) {
state.count--
},
},
getters: {
},
actions: { // action`第一种(context) 第二种({commit,dispatch ,state })`
add(context) {
return new Promise(resolve => {
setTimeout(() => {
context.commit('increment');
resolve();
}, 1000)
});
},
// add(context) { 执行异步加加法mutations里面调用 111111111 add可以更改为decrement在页面组件可以直接缩写为'decrement'
// setTimeout(() => {
// context.commit('increment')
// }, 1000) // 1s秒后触发这个方法
// },
// add({commit}){ // 111简写方法,解构赋值 一般开发用的多
// setTimeout(() => {
// commit('increment')
// },1000)// 1s秒后触发这个方法
// },
reduce(context) { // 执行异步减减法mutations里面调用 2222222222 reduce可以更改为increment在页面组件可以直接缩写为'increment'
setTimeout(() => {
context.commit('decrement')
}, 1000) // 1s秒后触发这个方法
},
// reduce({commit}){ // 222 简写方法,解构赋值 一般开发用的多
// setTimeout(() => {
// commit('decrement')
// },1000)// 1s秒后触发这个方法
// }
// 33333333333组合写法调用上一个action函数
// async actionA ({ commit }) {
// commit('gotData', await getData())
// },
// async actionB ({ dispatch, commit }) {
// await dispatch('actionA') // 等待 actionA 完成
// commit('gotOtherData', await getOtherData())
// }
},
modules: {}
})
二.action.vue 实现异步action点击加法或减法1s后执行
<template>
<div>
<h1>action案例 1s后加或者减</h1>
<div style="display: flex">
<button style="width: 50px" @click="increment">+</button>
{{ count }}
<button style="width: 50px" @click="decrement">-</button>
#### 总结
=============================================================
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)
第二阶段:移动端开发技术
![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)
第三阶段:前端常用框架
![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)
* 推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。
* 大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。