2024年最新Vuex基础入门，中高级前端面试题及答案

总结

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

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

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

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

---

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

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

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

//2.将全局数据，映射为当前组件的计算属性
computed:{
	...mapState(['count'])
}

3.3 Mutation：

Mutation用于变更Store中的数据

1. 只能通过Mutation变更Store数据，不可以直接操作Store中的数据。
2. 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
   this.$state.commit()是触发mutation的第一种方式
   定义Mutation

//定义Mutation
const store=new Vuex.store({
  state:{
    count:0
  },
  mutations:{
    add(state){
      //变更状态
      state.count++
    }
  }
})

触发Mutation

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

---

可以在触发mutation时传递参数

//定义Mutation
const store =new Vuex.store({
  state:{
    count:0
  },
  mutations:{
    addN(state,step){
      //变更状态
      state.count+=step
    }
  }
})

触发Mutation

methods:{
  handle2(){
    //在你调用commit函数,commit的作用就是调用某个mutation函数
    //触发mutations时携带参数
    this.$store.commit('addN',3)
  }
}

---

触发mutation的第二种方式
1.从vuex中导入mapMutations函数

//1. 从vuex中导入mapMutations函数
import {mapMutations} from 'vuex'

2.通过刚擦导入的mapMutations函数，将需要的mutation函数，映射为组价methods方法：

//2.将指定的mutation函数，映射为当前组件的methods函数
methods:{
  ...mapMutations['add','addN'],
  btmHandler1(){
    this.add()
  }
   btmHandler2(){
    this.addN(3)
  }
}

3.4 Action：

Action用于处理异步任务。
如果遇到异步操作变更数据，必须通过Action，而不能使用Mutation，但是Action中还是要通过触发Mutation的时间变更数据
this.$state.dispath()是触发action的第一种方式
触发action异步任务时携带参数：
定义Action

//定义Action
const Store=new Vuex.store({
  //...省略其他代码
  mutations:{
    addN(state,step){
      state.count+=step
    }
  },
  actions:{
    addNAsync(countext,step){
      setTmeout(()=>{
        //在actiion中，不能直接修改state中的数据
        //必须通过context.commit()触发这个mutation才行
        context.commit('addN',step)
      },1000)
    }
  }

})

触发Action

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

触发action的第二种方式
1.从vuex中按需导入mapActions函数

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

2.通过刚才导入的mapActions函数，将需要的actiion函数，映射为当前组件methods方法：

//2.通过刚才导入的mapActions函数，将需要的actiion函数，映射为当前组件methods方法
methods:{
  ...mapActions(['addNAsync']),
  btmHandler3(){
    this.addNAsync()
  }
}

3.5 Getter：

Getter用于度Store中的数据进行加工处理形成新的数据。不会修改原始数据，起到一个包装数据的作用

1. Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
2. Store中数据发生变化，Getter的数据也会跟着变化。

定义Getter

//定义Getter
const store=new Vuex.store({
  state:{
    count:0
  },
  getters:{
   showNum:state=>{
      return '当前最新的数量是'+state.count+1
    },
    showNum1(state){
      return '当前最新的数量是'+state.count+1
    }
  }
})

使用getters的第一种方式：

<h3>{{$store.getters.showNum1}}</h3>

this.$store.getters.名称

使用getters的第二种方式：

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

owNum1}}

this.$store.getters.名称

使用getters的第二种方式：




# 学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

[外链图片转存中...(img-QGjnUMry-1715709976243)]