2024年最全Vuex的学习笔记三：核心概念Action和Getter的理解和使用，手机web前端开发

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

=======================================================================

1.1Action的自我介绍

---

Action用于处理异步任务

如果通过异步操作变更数据，必须通过Action

，而不是使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。

Action 提交的是 mutation

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation。

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count:0, //在state中存储一个count数据

},

mutations: {

add(state){

//变更state中的count数据

state.count++

}

}，

actions:{

asyncAdd(context){

setTimeout(() => { //这里用定时器假设是异步操作

context.commit(‘add’) //这里还是触发mutations中的add方法更改count数据

}, 1000)

}

}

})

实践中，我们会经常用到 ES2015 的 参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）,所以也可以写成下面代码：

actions:{

asyncAdd({commit}){

setTimeout(() => {

commit(‘add’)

}, 1000)

}

}

1.2组件触发Action中的异步函数

---

第一种方式：通过 this.$store.dispatch 方法触发

methods:{

addCount(){

this.$store.dispatch(‘asyncAdd’)

}

}

第二种方式：mapActions辅助函数

<button @click = “asyncAdd”>

//从Vuex中按需导入mapActions函数

import { mapActions} from ‘vuex’

1.3组件触发Action异步时携带参数

---

首先要先更改一下mutations和actions中的函数，如下：

mutations: {

add(state,num){

//变更state中的count数据

state.count += num

}

}，

actions:{

asyncAdd({commit},num){

setTimeout(() => {

commit(‘add’,num)

}, 1000)

}

}

然后还是通过 this.$store.dispatch 方法触发

methods:{

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】