vuex的常见面试题

Posted 2021-10-18 JingG459

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中 划分模块的好处

答：

1. state 更为 容易管理 保证了store完整的状态数 又避免了相互之间的state冲突
2. 命名 操作 state 都变得 扁平 直观

11.vuex的store特性

答：

1. vuex 就是一个仓库 仓库里放了很多对象 其中state就是数据源存放地
2. state里面存放的数据是 响应式的 vue组件从store读取数据 若是 store中的数据发生改变 依赖这项数据的组件 也会发生更新
3. 通过 mapState 把全局的state 和 getters 映射到当前组件的 computed中
    

12.不使用Vuex会带来什么问题

答：

1. 可维护性会下降，想修改数据要维护三个地方；
2. 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
3. 增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

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

答：

1. 如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
2. 如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。

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

答：localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate

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

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

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

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

17.用vue做的项目，用了vue的全家桶吗？vue里面为什么不用jq？

答：vue+vue-router+vuex+axios+es6+sass

18.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(() => {
  // ...
})

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

答：利用ES6的async和await来实现。

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

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

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

21.在模块中，getter和mutation和action中怎么访问全局的state和getter？

答：

• 在getter中可以通过第三个参数rootState访问到全局的state,可以通过第四个参数rootGetters访问到全局的getter。
• 在mutation中不可以访问全局的satat和getter，只能访问到局部的state。
• 在action中第一个参数context中的context.rootState访问到全局的state，context.rootGetters访问到全局的getter。

22.怎么在带命名空间的模块内提交全局的mutation和action？

答：将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

this.$store.dispatch('actionA', null, { root: true })
this.$store.commit('mutationA', null, { root: true })

23.怎么在带命名空间的模块内注册全局的action？

答：

actions: {
    actionA: {
        root: true,
        handler (context, data) { ... }
    }
  }

24.怎么使用mapState，mapGetters，mapActions和mapMutations这些函数来绑定带命名空间的模块？

答：首先使用createNamespacedHelpers创建基于某个命名空间辅助函数

import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('moduleA');
export default {
    computed: {
        // 在 `module/moduleA` 中查找
        ...mapState({
            a: state => state.a,
            b: state => state.b
        })
    },
    methods: {
        // 在 `module/moduleA` 中查找
        ...mapActions([
            'actionA',
            'actionB'
        ])
    }
}

25.Vuex插件有用过吗？怎么用简单介绍一下？

答：Vuex插件就是一个函数，它接收 store 作为唯一参数。在Vuex.Store构造器选项plugins引入。 在store/plugin.js文件中写入

export default function createPlugin(param){
    return store =>{
        //...
    }
}

然后在store/index.js文件中写入

import createPlugin from './plugin.js'
const myPlugin = createPlugin()
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

26.在Vuex插件中怎么监听组件中提交mutation和action？

答：

• 用Vuex.Store的实例方法subscribe监听组件中提交mutation
• 用Vuex.Store的实例方法subscribeAction监听组件中提交action 在store/plugin.js文件中写入

• export default function createPlugin(param) {
      return store => {
          store.subscribe((mutation, state) => {
              console.log(mutation.type)//是那个mutation
              console.log(mutation.payload)
              console.log(state)
          })
          // store.subscribeAction((action, state) => {
          //     console.log(action.type)//是那个action
          //     console.log(action.payload)//提交action的参数
          // })
          store.subscribeAction({
              before: (action, state) => {//提交action之前
                  console.log(`before action ${action.type}`)
              },
              after: (action, state) => {//提交action之后
                  console.log(`after action ${action.type}`)
              }
          })
      }
  }

然后在store/index.js文件中写入

import createPlugin from './plugin.js'
const myPlugin = createPlugin()
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

 

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

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

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

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

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

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

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