2024年最新vue保姆级教程----深入了解Vuex的工作原理(2)，2024年最新字节跳动8年老Web前端面试官经验谈

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总

Vuex的几个核心概念

Vuex工作原理

✨ 结语

---

✨ 前言

Vuex是一个专门为Vue.js设计的状态管理模式。它采用集中式存储管理应用程序的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

下面我们来对它的核心概念与工作原理进行详细分解：

Vuex的几个核心概念

• State:储存应用状态的数据源,是一个树形结构,只有通过mutation函数才能改变其状态。
• Getters: 对State的计算属性,类似Vue中的computed。
• Mutations: 改变State的唯一途径, mutation必须是同步函数。
• Actions: 用于提交Mutation来改变State,可以包含异步操作。
• Modules: 将State、Getters、Mutations和Actions分割到不同的module中以保持项目的结构化。

State

State是Vuex中的状态中心,存储着所有组件状态的数据。它是一个树形结构,只能通过mutation改变状态。

State提供了一个应用的“单一数据源”,所有共享状态都定义在这里, components只需要引入使用不需要担心状态不同步的问题。

// store.js

export default new Vuex.Store({
  state: {
    count: 0
  }  
})

// Component.vue

import { mapState } from 'vuex'

export default {
  computed: mapState({
    count: state => state.count
  })
}

Getters

Getters相当于store的计算属性,对State进行加工处理形成易于使用的新数据。

Getters接收state作为第一个参数,供其内部消费和处理,通过返回值暴露给外部。可以用来简化数据处理和实现缓存。

// store.js

export default new Vuex.Store({
  getters: {
    doubleCount: state => state.count * 2 
  }
})

// Component.vue

import { mapGetters } from 'vuex'

export default {
  computed: mapGetters([
    'doubleCount' 
  ])
}

Mutations

Mutations是改变State的唯一途径。

它接受state作为第一个参数,payload作为第二个参数。可以包含多个mutation函数,通过type区分不同的mutation。

必须是同步函数,通过提交mutation而非直接改变state来保证状态改变可追踪和调试。

// store.js

export default new Vuex.Store({
  mutations: {
    increment (state) {
      state.count++
    }
  }  
})

// Component.vue 

methods: {
  increment() {
    this.$store.commit('increment') 
  }
}

Actions

Actions用于处理业务逻辑,支持异步操作。

通过context.commit提交mutation来触发状态改变,而非直接改变state。

可以包含异步操作如 AJAX请求,可以用async/await简化异步流程。

// store.js

export default new Vuex.Store({
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000) 
    }
  }
})

// Component.vue

methods: {
  incrementAsync() {
    this.$store.dispatch('incrementAsync')
  }
}

Modules

Modules用于将状态、getters、actions、mutations分割到不同模块中。

每个模块都有自己的state、getters、actions、mutations,不同模块的状态独立维护。

有助于项目结构化,减少命名冲突。

// store.js

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
### 总结

**前端资料汇总**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/6e0ba223f65e063db5b1b4b6aa26129a.png)

*   框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

*   算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯



*   在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

*   要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
    喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！