2024年最全vuex之state、actions、mutations，面试的几个要点

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

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

import mutations from ‘./mutations’

import actions from ‘./actions’

import state from ‘./state’

export default createStore({

state,

getters,

mutations,

actions

});

state

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

state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，

在组件中取

{{ count }}

//* 每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

mapState 辅助函数

---

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。

所以我们可以使用 mapState 辅助函数来帮助我们生成计算属性:

getter

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

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

在getterjs文件中

export default {

getCount(state,getters) { //getters 可以获取到getter中的方法 比如getCount

return state.count

}

}

//获取 this.$store.getters.getCount

或者也可以通过mapGetters 辅助函数来获取

1.对象取别名的方式

…mapGetters({

// 把 this.getCount 映射为 this.$store.getters.getCount

getCount1: ‘getCount’

})

2.数组的方式

…mapGetters([‘getCount’])

Mutation

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

是操作state数据的方法的集合，比如对该数据的修改、增加、删除

在mutationjs中调用

mutations: {

//这里是set方法

changeCount(state,num) {

// 变更count

state.count += num.value

}

},

在组件中调用

1. this.$store.commit(‘changeCount’,10)

2. this.$store.commit({

type:‘changeCount’,

value: 10

})

Action

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

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