2024年前端最全Vuex 简单入门(2)，2024年字节跳动、阿里等大厂前端面试题

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

安装：

npm install --save- vuex

引入：

import Vuex from ‘vuex’

import Vue from ‘vue’

Vue.use(Vuex)

Vuex 的组成部分

==========

完整的应用 Vuex 开发的应用结构应该是这样的：

vuex-complete

下面针对比较核心的部分进行说明。

State

=====

State 负责存储整个应用的状态数据，一般需要在使用的时候在根节点注入 store 对象，后期就可以使用 this.$store.state 直接获取状态

// store 为实例化生成的

import store from ‘./store’

new Vue({

el: ‘#app’,

store,

render: h => h(App)

})

这个 store 可以理解为一个容器，包含着应用中的 state 等。实例化生成 store 的过程是：

const mutations = {…}

const actions = {…}

const state = {…}

Vuex.Store({

state,

actions,

mutations

})

后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用 this.$store.state 获取，当然，也可以利用 vuex 提供的 mapState 辅助函数将 state 映射到计算属性中去，如

// 我是组件

import {mapState} from ‘vuex’

export default {

computed: mapState({

count: state => state.count

})

}

这样直接就可以在组件中直接使用了。

Mutations

=========

Mutations 的中文意思是“变化”，利用它可以更改状态，本质就是用来处理数据的函数，其接收唯一参数值 state。

store.commit(mutationName) 是用来触发一个 mutation 的方法。需要记住的是，定义的 mutation 必须是同步函数，否则 devtool 中的数据将可能出现问题，使状态改变变得难以跟踪。

const mutations = {

mutationName(state) {

//在这里改变state中的数据

}

}

在组件中触发：

//我是一个组件

export default {

methods: {

handleClick() {

this.$store.commit(‘mutationName’)

}

}

}

或者使用辅助函数 mapMutation 直接将触发函数映射到 methods 上，这样就能在元素事件绑定上直接使用了。如：

import {mapMutations} from ‘vuex’

//我是一个组件

export default {

methods: mapMutations([

‘mutationName’

])

}

Actions

=======

Actions 也可以用于改变状态，不过是通过触发 mutation 实现的，重要的是可以包含异步操作。其辅助函数是 mapActions 与 mapMutations 类似，也是绑定在组件的 methods 上的。如果选择直接触发的话，使用 this.$store.dispatch(actionName) 方法。

// 定义 Actions

const actions = {

actionName({commit}) {

//dosomething

commit(‘mutationName’)

}

}

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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

ommit(‘mutationName’)

}

}

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

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

[外链图片转存中…(img-6p9zGgQM-1715507900753)]