2024年Web前端最新Vuex面试题汇总，前端页面的信息展示主要包括哪三个层面

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

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

Vuex的5个核心属性是什么？

参考答案

分别是 state、getters、mutations、actions、modules 。

Vuex中状态储存在哪里，怎么改变它？

参考答案

存储在state中，改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation。

Vuex中状态是对象时，使用时要注意什么？

参考答案

因为对象是引用类型，复制后改变属性还是会影响原始数据，这样会改变state里面的状态，是不允许，所以先用深度克隆复制对象，再修改。

怎么在组件中批量使用Vuex的state状态？

参考答案

使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中

import {mapState} from ‘vuex’

export default{

computed:{

…mapState([‘price’,‘number’])

}

}

Vuex中要从state派生一些状态出来，且多个组件使用它，该怎么做，？

参考答案

使用getter属性，相当Vue中的计算属性computed，只有原状态改变派生状态才会改变。

getter接收两个参数，第一个是state，第二个是getters(可以用来访问其他getter)。

const store = new Vuex.Store({

state: {

price: 10,

number: 10,

discount: 0.7,

},

getters: {

total: state => {

return state.price * state.number

},

discountTotal: (state, getters) => {

return state.discount * getters.total

}

},

});

然后在组件中可以用计算属性computed通过this.$store.getters.total这样来访问这些派生转态。

computed: {

total() {

return this.$store.getters.total

},

discountTotal() {

return this.$store.getters.discountTotal

}

}

怎么通过getter来实现在组件内可以通过特定条件来获取state的状态？

参考答案

通过让getter返回一个函数，来实现给getter传参。然后通过参数来进行判断从而获取state中满足要求的状态。

const store = new Vuex.Store({

state: {

todos: [

{ id: 1, text: ‘…’, done: true },

{ id: 2, text: ‘…’, done: false }

]

},

getters: {

getTodoById: (state) => (id) =>{

return state.todos.find(todo => todo.id === id)

}

},

});

然后在组件中可以用计算属性computed通过this.$store.getters.getTodoById(2)这样来访问这些派生转态。

computed: {

getTodoById() {

return this.$store.getters.getTodoById

},

}

mounted(){

console.log(this.getTodoById(2).done)//false

}

怎么在组件中批量使用Vuex的getter属性

参考答案

使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中

import {mapGetters} from ‘vuex’

export default{

computed:{

…mapGetters([‘total’,‘discountTotal’])

}

}

怎么在组件中批量给Vuex的getter属性取别名并使用

参考答案

使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中

import {mapGetters} from ‘vuex’

export default{

computed:{

…mapGetters({

myTotal:‘total’,

myDiscountTotal:‘discountTotal’,

})

}

}

在Vuex的state中有个状态number表示货物数量，在组件怎么改变它。

参考答案

首先要在mutations中注册一个mutation

const store = new Vuex.Store({

state: {

number: 10,

},

mutations: {

SET_NUMBER(state,data){

state.number=data;

}

},

});

在组件中使用this.$store.commit提交mutation，改变number

this.$store.commit(‘SET_NUMBER’,10)

在Vuex中使用mutation要注意什么。

参考答案

mutation 必须是同步函数

在组件中多次提交同一个mutation，怎么写使用更方便。

参考答案

使用mapMutations辅助函数,在组件中这么使用

import { mapMutations } from ‘vuex’

methods:{

…mapMutations({

setNumber:‘SET_NUMBER’,

})

}

然后调用this.setNumber(10)相当调用this.$store.commit('SET_NUMBER',10)

Vuex中action和mutation有什么区别？

参考答案

• action 提交的是 mutation，而不是直接变更状态。mutation可以直接变更状态。

• action 可以包含任意异步操作。mutation只能是同步操作。

• 提交方式不同，action 是用this.$store.dispatch('ACTION_NAME',data)来提交。mutation是用this.$store.commit('SET_NUMBER',10)来提交。

• 接收参数不同，mutation第一个参数是state，而action第一个参数是context，其包含了

{

state, // 等同于 store.state，若在模块中则为局部状态

rootState, // 等同于 store.state，只存在于模块中

commit, // 等同于 store.commit

dispatch, // 等同于 store.dispatch

getters, // 等同于 store.getters

rootGetters // 等同于 store.getters，只存在于模块中

}

Vuex中action和mutation有什么相同点？

参考答案

第二参数都可以接收外部提交时传来的参数。 this.$store.dispatch('ACTION_NAME',data)和this.$store.commit('SET_NUMBER',10)

在组件中多次提交同一个action，怎么写使用更方便。

参考答案

使用mapActions辅助函数,在组件中这么使用

methods:{

…mapActions({

setNumber:‘SET_NUMBER’,

})

}

然后调用this.setNumber(10)相当调用this.$store.dispatch('SET_NUMBER',10)

Vuex中action通常是异步的，那么如何知道action什么时候结束呢？

参考答案

在action函数中返回Promise，然后再提交时候用then处理

actions:{

SET_NUMBER_A({commit},data){

return new Promise((resolve,reject) =>{

setTimeout(() =>{

commit(‘SET_NUMBER’,10);

resolve();

},2000)

})

}

}

this.$store.dispatch(‘SET_NUMBER_A’).then(() => {

// …

})

Vuex中有两个action，分别是actionA和actionB，其内都是异步操作，在actionB要提交actionA，需在actionA处理结束再处理其它操作，怎么实现？

参考答案

利用ES6的async和await来实现。

actions:{

async actionA({commit}){

//…

},

async actionB({dispatch}){

await dispatch (‘actionA’)//等待actionA完成

// …

}

}

有用过Vuex模块吗，为什么要使用，怎么使用。

参考答案

有，因为使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。所以将 store 分割成模块（module）。每个模块拥有自己的 state、mutations、actions、getters，甚至是嵌套子模块，从上至下进行同样方式的分割。

在module文件新建moduleA.js和moduleB.js文件。在文件中写入

const state={

//…

}

const getters={

//…

}

const mutations={

//…

}

const actions={

//…

}

export default{

state,

getters,

mutations,

actions

}

然后再index.js引入模块

import Vue from ‘vue’;

import Vuex from ‘vuex’;

Vue.use(Vuex);

import moduleA from ‘./module/moduleA’

import moduleB from ‘./module/moduleB’

const store = new Vuex.Store({

modules:{

moduleA,

moduleB

}

})

export default store

在模块中，getter和mutation接收的第一个参数state，是全局的还是模块的？

参考答案

第一个参数state是模块的state，也就是局部的state。

在模块中，getter和mutation和action中怎么访问全局的state和getter？

参考答案

• 在getter中可以通过第三个参数rootState访问到全局的state,可以通过第四个参数rootGetters访问到全局的getter。

• 在mutation中不可以访问全局的satat和getter，只能访问到局部的state。

• 在action中第一个参数context中的context.rootState访问到全局的state，context.rootGetters访问到全局的getter。

在组件中怎么访问Vuex模块中的getter和state,怎么提交mutation和action？

参考答案

• 直接通过this.$store.getters和this.$store.state来访问模块中的getter和state。

• 直接通过this.$store.commit('mutationA',data)提交模块中的mutation。

• 直接通过this.$store.dispatch('actionA,data')提交模块中的action。

用过Vuex模块的命名空间吗？为什么使用，怎么使用。

参考答案

默认情况下，模块内部的action、mutation和getter是注册在全局命名空间，如果多个模块中action、mutation的命名是一样的，那么提交mutation、action时，将会触发所有模块中命名相同的mutation、action。

这样有太多的耦合，如果要使你的模块具有更高的封装度和复用性，你可以通过添加namespaced: true 的方式使其成为带命名空间的模块。

export default{

namespaced: true,

state,

分享

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