2024年最新Vuex的学习笔记三：核心概念Action和Getter的理解和使用，在字节跳动我是如何当面试官的

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

如果通过异步操作变更数据，必须通过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:{

addCount(){

var num = 5

this.$store.dispatch(‘asyncAdd’,num )

}

}

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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