Vuex常见面试题

Posted 2022-05-19 老张在线敲代码

1.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。（公共数据库）

当项目遇到以下两种场景时

    1. 多个组件依赖于同一状态时。
 	2. 来自不同组件的行为需要变更同一状态。

解决的问题：多个视图依赖同一个状态，来自不同视图的行为需要变更同一状态，适用于中大型的单页面应用。

2.vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

state：存放公共数据的地方；

getter：获取根据业务场景处理返回的数据；

mutations：唯一修改state的方法，修改过程是同步的；

action：异步处理，通过分发操作触发mutation；

module：将store模块分割，减少代码臃肿；

3.Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。

如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

4.页面刷新后vuex的state数据丢失怎么解决？

就是放在localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate。

5.使用vuex的优势是什么？

其实vuex中的所有功能都能够通过其他的方式进行实现，只不过vuex对这些方法进行了整合处理，使用起来更加便捷，同时也便于维护。

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

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

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

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

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

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

import mapState from 'vuex'
export default
    computed:
        ...mapState(['price','number'])
    

9.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
    

10.vuex中 划分模块的好处

state 更为 容易管理 保证了store完整的状态数 又避免了相互之间的state冲突

11.vuex的store特性

vuex 就是一个仓库 仓库里放了很多对象 其中state就是数据源存放地

state里面存放的数据是 响应式的 vue组件从store读取数据 若是 store中的数据发生改变 依赖这项数据的组件 也会发生更新

通过 mapState 把全局的state 和 getters 映射到当前组件的 computed中

12.vuex怎么知道state是通过mutation修改还是外部直接修改的？

通过$watch监听mutation的commit函数中_committing是否为true

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

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

14.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(() => 
  // ...
)

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

利用ES6的async和await来实现。

actions:
    async actionA(commit)
        //...
    ,
    async actionB(dispatch)
        await dispatch ('actionA')//等待actionA完成
        // ... 
    

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

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

17.在v-model上怎么用Vuex中state的值？

需要通过computed计算属性来转换。

<input v-model="message">
// ...
computed: 
    message: 
        get () 
            return this.$store.state.message
        ,
        set (value) 
            this.$store.commit('updateMessage', value)
        
    

18.Vuex的严格模式是什么,有什么作用,怎么开启？

在严格模式下，无论何时发生了状态变更且不是由 mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

在Vuex.Store 构造器选项中开启,如下：

const store = new Vuex.Store(
    strict:true,
)