Vuex常见面试题

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,
})

猜你喜欢

转载自blog.csdn.net/qq_47272950/article/details/124807338
今日推荐