2024年Web前端最新vue保姆级教程----深入了解Vuex的工作原理(1)，web前端面试你必须要知道的那些知识和技能

最后

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

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

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

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: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

这样Vuex的每个部分如何协同工作会更加明确,希望对你进一步理解Vuex有帮助!可以根据这个框架来深入去实践和应用Vuex。

Vuex工作原理

1. Vue组件通过dispatch方法触发Actions。

// Component.vue
methods: {


**web浏览器中的javascript**

*   客户端javascript
*   在html里嵌入javascript
*   javascript程序的执行
*   兼容性和互用性
*   可访问性
*   安全性
*   客户端框架
*   **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

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

**window对象**

*   计时器

*   浏览器定位和导航

*   浏览历史

*   浏览器和屏幕信息

*   对话框

*   错误处理

*   作为window对象属性的文档元素

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