Vuex 面试题：使用 vuex 的核心概念

冷不防 2022-09-03 00:10 155阅读 0赞

### Vuex 面试题 ###

*   *   *   *  1. 什么是Vuex？
             *  2. Vuex解决了什么问题？
             *  3. 使用vuex的核心概念
             *   *  1）store
                 *  2） state
                 *  3）getters
                 *  4）mutations
                 *  5）actions

--------------------

#### 1. 什么是Vuex？ ####

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态， 并以相应的规则保证状态以一种可预测的方式发生改变 简单来说，就是用来集中管理数据；

#### 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: ` <div> <counter></counter> </div> `
    });

这样可以在子组件中使用 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 ({ 
        })
      }
    }

这样，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">+</button>

##### 5）actions #####

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

**（1）一个简单的 action**

action 同样支持 payload 和对象方式来分发，格式跟 commit 是一样的，不再赘述。

**（2）在组件中分发 action**

方法1: 在组件的 methods 中，使用 `this.$store.dispatch(‘increment’)`。  
方法2: 使用 mapActions，跟 mapMutations 是类似的。

import {  mapActions } from 'vuex'
    export default { 
      // ...
      methods: { 
        ...mapActions([
        'increment' // 映射 this.increment() 为 this.$store.dispatch('increment')]),
        ...mapActions({ 
          add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment')
        })
      }
    }
    // 同样在组件中，可以这样来使用
    <button @click="increment">+</button>

**（3）组合 actions**

因为 action 是异步的，那么我们需要知道这个异步函数什么时候结束，以及等到其执行后，会利用某个 action 的结果。这个可以使用 promise 来实现。在一个 action 中返回一个 promise，然后使用 then() 回调函数来处理这个 action 返回的结果。

actions:{ 
      actionA({ commit}){ 
        return new Promise((resolve, reject) => { 
          setTimeout(() => { 
            commit('someMutation');
            resolve();
          },1000);
        })
      }
    }
    // 这样就可以操作actionA返回的结果了
    store.dispatch('actionA').then(() => { 
      // dosomething ...
    });
    // 也可以在另一个action中使用actionA的结果
    actions: { 
      // ...
      actionB({ dispatch, commit }){ 
        return dispatch('actionA').then(() => { 
          commit('someOtherMutation');
        })
      }
    }

> **更多面试题：119页Vue面试题总结可【[点击此处免费领取！][Link 1]】**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1FJQU5EWFg_size_16_color_FFFFFF_t_70][]

[Link 1]: https://jq.qq.com/?_wv=1027&k=qSYQ6LrI
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1FJQU5EWFg_size_16_color_FFFFFF_t_70]: /images/20220829/072e9801f8e04998a458ff58a18d60b7.png

Vuex 面试题：使用 vuex 的核心概念

发表评论取消回复

还没有评论，来说两句吧...

相关阅读