拼多多前端社招面试，Vuex 面试题：使用 vuex 的核心概念，2024最新前端面试笔试

2. Vuex解决了什么问题？

解决两个问题:

• 多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状

态传递无能为力。

• 来自不同组件的行为需要变更同一状态。以往采用父子组件直接引用或者通过事件来变更和同步状

态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

3. 使用vuex的核心概念

1）store

vuex 中最关键的是 store 对象，这是 vuex 的核心。可以说，vuex 这个插件其实就是一个 store 对象，每

个 vue 应用仅且仅有一个 store 对象。

（1）创建store

const store = new Vuex.Store({…});

可见，store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：

• state – 存放状态

• getters – state的计算属性

• mutations – 更改状态的逻辑，同步操作

• actions – 提交mutation，异步操作

• mudules – 将store模块化

关于store，需要先记住两点：

• store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，

那么相应的组件也会得到更新；

• 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使

得我们可以方便地跟踪每一个状态的变化。

（2）完整的store的结构

const store = new Vuex.Store({

state: {

// 存放状态

},

getters: {

// state的计算属性

},

mutations: {

// 更改state中状态的逻辑，同步操作

},

actions: {

// 提交mutation，异步操作

},

// 如果将store分成一个个的模块的话，则需要用到modules。

//然后在每一个module中写state, getters, mutations, actions等。

modules: {

a: moduleA,

b: moduleB,

// …

}

2） state

state上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在 store 中去。

（1）如何在组件中获取 vuex 状态

由于 vuex 的状态是响应式的，所以从 store 中读取状态的的方法是在组件的计算属性中返回某个状态。

import store from ‘store’;

const Counter = {

template: <div>{{ count }}</div>,

computed: {

count () {

// 获取store中的状态

return store.state.count;

}

}

}

这样，组件中的状态就与 store 中的状态关联起来了。每当 store.state.count 发生变化时，都会重新求取计算属性，从而更新 DOM。

然而，每个组件中都需要反复倒入 store。可以将 store 注入到 vue 实例对象中去，这样每一个子组件中都可以直接获取 store 中的状态，而不需要反复的倒入 store 了。

const app = new Vue({

el: ‘#app’,

// 把 store 对象注入到了

store,

components: { Counter },

template: `

`

});

这样可以在子组件中使用 this.$store.state.count 访问到 state 里面的 count 这个状态

const Counter = {

template: <div>{{ count }}</div>,

computed: {

count () {

// 获取store中的状态

return this.$store.state.count;

}

}

}

（2） mapState

当一个组件获取多种状态的时候，则在计算属性中要写多个函数。为了方便，可以使用 mapState 辅助函数来帮我们生成计算属性。

import { mapState } from ‘vuex’;

export default {

// …

data (){

localState: 1

}

computed: mapState({

// 此处的state即为store里面的state

count: state => state.count,

// 当计算属性的名称与state的状态名称一样时，可以省写

// 映射 this.count1 为 store.state.count1

count1,

//'count’等同于 ‘state => state.count’

countAlias: ‘count’,

countPlus (state){

// 使用普通函数是为了保证this指向组件对象

return state.count + this.localState;

}

})

}

//上面是通过mapState的对象来赋值的，还可以通过mapState的数组来赋值

computed: mapState([‘count’]);

//这种方式很简洁，但是组件中的state的名称就跟store中映射过来的同名

对象扩展运算符

mapState 函数返回的是一个对象，为了将它里面的计算属性与组件本身的局部计算属性组合起来，需要用到对象扩展运算符。

computed: {

localState () {

…mapState ({

})

}

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

==
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-FwVqeWyb-1712540206295)]