【vue面试题-vuex】_vuex相关的面试题

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

答：vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，…… export 。
场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

2.vuex有哪几种属性？

答：有五种，分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

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

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

4.Vuex解决了什么问题？

答: 多个组件依赖于同一状态时， 来自不同组件的行为需要变更同一状态。

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

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

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

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

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

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

import {mapState} from 'vuex'
 export default{ 
  computed:{ 
 	 ...mapState(['price','number']) ,
  	// 推荐写法如下：
    //...mapState({
    //    DbSource: state => state.DbSource,
    //    phoneMap: state => state.richCommunicationSuite.phoneMap, // 模块化写法
    //})
  } 
}
//methods中调用：this.price()
1
2
3
4
5
6
7
8
9
10
11
12

为什么要store.commit（'add'）才能触发事件执行呢？可不可以进行直接调用mutation函数进行操作呢？

解答：stroe类里根本没有mutation方法，只能通过调用commit方法来执行mutation里的函数列表

为什么不可以直接对state存储的状态进行修改，只能通过调用函数的方法修改呢？

解答：vuex通过强制限制对store的修改方式来确保状态的可追踪性。只有通过mutation函数才能修改store中的状态，这样可以轻松的跟踪状态的变化，也可以避免无意中从不同的组件中直接修改stroe导致的代码难以维护和调式的问题

为什么存在一步调用的函数需要stroe.dispatch('asyncAdd')函数才能完成呢？可以直接调用store.commit('asyncAdd')嘛？如果不可以，为什么呢？

解答：实际上dispatch方法和commit方法远不止这么简单，在源码中，dispatch方法返回的是一个promise对象，而commit方法没有返回值，完全进行的是同步代码的操作，虽然返回值肯呢个适用的场景不多，但是这样设计的主要母的还是为了确保状态的可追踪性

createStore()和userStore()到底发生了什么？

当我们去调用createStore（）函数，其构造函数就会接收一个包含stae、mutation、action和getters函数的对象options，然后将他们保存到实例属性中，从此state中的值都会转换为响应式对象，同时遍历所有getters函数，将其封装成computed属性并保存到实例属性getters中，而在main.js里调用了app.use()，install()方法自动执行，将将当前store实例注册到vue.js应用程序中，只需要调用useStore()就可以拿到全局状态管理的store实例了，可以靠inject和provide实现全局共享