2024年最新Vuex入门(四)—— action和(1)，Web前端常用面试

计算机网络

• 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的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。