2024年前端最全Vuex 面试题：使用 vuex 的核心概念，web前端开发业余培训-CSDN博客

本文链接：https://blog.csdn.net/2401_84123150/article/details/138501453

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

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

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

（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 ({

})

}

这样，mapState 中的计算属性就与 localState 计算属性混合一起了。

3）getters

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。此时可以用到 getters，getters 可以看作是 store 的计算属性，其参数为 state。

const store = new Vuex.Store({

state: {

todos: [

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

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

]

getters: {

doneTodos: state => {

return state.todos.filter(todo => todo.done);

}

});

（1）获取getters里面的状态，方法一

store.getters.doneTodos // [{ id: 1, text: ‘reading’, done: true }]

//在组件中，则要写在计算属性中，

computed: {

doneTodos () {

return this.$store.getters.doneTodos;

}

（2）使用mapGetters获取getters里面的状态：方法二

import {mapState, mapGetters} from ‘vuex’;

computed: {

…mapState([‘increment’]),

…mapGetters([‘doneTodos’])

}

4）mutations

mutations 里面是如何更改 state 中状态的逻辑。更改 Vuex 中的 state 的唯一方法是，提交 mutation，即 store.commit(‘increment’) 。

（1）提交载荷 (payload)

可以向 commit 传入额外的参数，即 mutation 的载荷。

mutations: {

increment(state, n){

state.count += n;

}

store.commit(‘increment’, 10);

payload 还可以是一个对象。

mutations: {

increment(state, payload)

state.count += payload.amount;

}

store.commit(‘increment’, {amount: 10});

还可以使用 type 属性来提交 mutation。

store.commit({

type: ‘increment’,

amount: 10

});

// mutations保持不变

mutations: {

increment(state, payload){

state.count += payload.amount;

}

注意：mutation 必须是同步函数，不能是异步的，这是为了调试的方便。

（2）在组件中提交 mutations

那么 mutation 应该在哪里提交呢？因为js是基于事件驱动的，所以改变状态的逻辑肯定是由事件来驱动的，所以 store.commit(‘increment’) 是在组件的 methods 中来执行的。

方法1: 在组件的 methods 中提交

methods: {

increment(){

this.$store.commit(‘increment’);

}

方法2: 使用 mapMutaions

用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

import { mapMutaions } from ‘vuex’;

export default {

// …

methods: {

…mapMutaions([

‘increment’ // 映射 this.increment() 为 this.$store.commit(‘increment’)

]),

…mapMutaions([

add: ‘increment’ // 映射 this.add() 为 this.$store.commit(‘increment’)

])

}

// 因为mutation相当于一个method，所以在组件中，可以这样来使用

<button @click=“increment”>+

5）actions

因为 mutations 中只能是同步操作，但是在实际的项目中，会有异步操作，那么 actions 就是为了异步操作而设置的。这样，就变成了在 action 中去提交 mutation，然后在组件的 methods 中去提交 action。只是提交 actions的时候使用的是 dispatch 函数，而 mutations 则是用 commit 函数。

（1）一个简单的 action

const store = new Vuex.Store({

state: {

count: 0

mutations: {

increment(state){

state.count++;

}

actions: {

increment(context){

context.commit(‘increment’);

}