Web前端最全vue全家桶之vuex详解

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

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

Vuex 中的主要核心概念如下：

• State
• Mutation
• Action
• Getter

  3.2 State

  State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

  // 创建store数据源，提供唯一公共数据 const store = new Vuex.Store({ state: { count: 0 } })

  组件访问 State 中数据的第一种方式：

  this.$store.state.全局数据名称

  组件访问 State 中数据的第二种方式：

  // 1. 从 vuex 中按需导入 mapState 函数import { mapState } from 'vuex'

  通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性:

  // 2. 将全局数据，映射为当前组件的计算属性computed: { ...mapState(['count'])}在代码中使用{{count}} //需要展示什么数据就写什么数据

  3.3 Mutation

  Mutation 用于变更 Store中 的数据。

  ① 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。

  ② 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

   // 定义 Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { //mutations里面所有的方法的第一个参数都代表stata这个对象,第二个参数开始才是真正要传的数据 add(state) { // 变更状态 state.count++ }   } })

   // 触发mutation methods: { handle1() { // 触发 mutations 的第一种方式 this.$store.commit('add') } }

  可以在触发 mutations 时传递参数：

   // 定义Mutation const store = new Vuex.Store({ state: { count: 0 }, mutations: { //mutations里面所有的方法的第一个参数都代表stata这个对象,第二个参数开始才是真正要传的数据 addN(state, step) { // 变更状态 state.count += step } } })

   // 触发mutation methods: { handle2() { // 在调用 commit 函数， // 触发 mutations 时携带参数 this.$store.commit('addN', 3) } }

  this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：

  // 1. 从 vuex 中按需导入 mapMutations 函数import { mapMutations } from 'vuex'//通过刚才导入的 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法：// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数methods: { ...mapMutations(['add', 'addN']), //调用函数 xj1(){this.add()}//传参方式xj(val){//这里的参数就是mutations函数的第二个参数,也就是不包括state的this.addN(3) }}

  3.4 Action

  Action 用于处理异步任务。

  如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

   // 定义 Action const store = new Vuex.Store({ // ...省略其他代码 mutations: { add(state) { state.count++ } }, actions: { //actions里面所有的方法的第一个参数都代表mutations这个对象,第二个参数开始才是真正要传的数据 addAsync(context) { setTimeout(() => { context.commit('add') }, 1000) }  } })

   // 触发 Action methods: { handle() { // 触发 actions 的第一种方式 this.$store.dispatch('addAsync') } }

  触发 actions 异步任务时携带参数:

   // 定义 Action const store = new Vuex.Store({ // ...省略其他代码 mutations: { addN(state, step) { state.count += step } }, actions: { //actions里面所有的方法的第一个参数都代表mutations这个对象,第二个参数开始才是真正要传的数据 addNAsync(context, step) { setTimeout(() => { context.commit('addN', step) }, 1000) }  } })

   // 触发 Action methods: { handle() { // 在调用 dispatch 函数， // 触发 actions 时携带参数 this.$store.dispatch('addNAsync', 5) } }

  this.$store.dispatch() 是触发 actions 的第一种方式，触发 actions 的第二种方式：

  // 1. 从 vuex 中按需导入 mapActions 函数import { mapActions } from 'vuex'通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数methods: { ...mapActions(['addASync', 'addNASync'])}

  文末

  如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

  同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

  这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

  269页《前端大厂面试宝典》

  包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

  前端面试题汇总

  JavaScript