vuex面试题

【1.什么是Vuex？】

	Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态

【2.Vuex解决了什么问题？】

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

【3.vuex使用与什么场景？】

	单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

【4.vuex有哪几种属性&状态？】

	state、getters、mutations、actions、modules 。

【5.vuex的流程】

	页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation。mutation会修改state中对于的值。
	最后通过getter把对应值跑出去，在页面的计算属性中，通过mapGetter来动态获取state中的值。

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

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

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

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

【8.vuex的State特性是？】

	stae就是存放数据的地方，类似一个仓库  。
    特性就是当mutation修改了state的数据的时候，他会动态的去修改所有的调用这个变量的所有组件里面的值（ 若是store中的数据发生改变，依赖这个数据的组件也会发生更新 ）

【9.vuex的Getter特性是？】

	getter用来获取数据，mapgetter经常在计算属性中被使用

【10.vuex的Mutation特性是？】

	Action 类似于 mutation，不同在于：

	1、Action 提交的是 mutation，而不是直接变更状态。

	2、Action 可以包含任意异步操作

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

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

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

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

	如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
	如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用。

【13.vuex的优缺点】

	优点：
	1.JS原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
	2.属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会)
	3.限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染
	缺点：
	1.刷新浏览器，vuex中的state会重新变为初始状态
	2.解决方案-插件vuex-persistedstate

项目中遇到vuex此缺点的处理
场景 - 用户登录，提交订单之后，跳转到付款页，在created发送axios请求，获取付款二维码字符串等信息。但是刷新之后，请求响应是401 Unauthorized，看headers是Bearer undefined。

created: function () {
    this.$axios({
      url: "/airorders/" + this.$route.query.id,
      headers: {
        Authorization: "Bearer " + this.$store.state.user.userInfo.token,
      },
    }).then((res) => {
      console.log(res.data);
    });
  }

原因分析 - 不可以直接在created获取数据，因为直接跳转过来没问题，但是一刷新，vuex的token就没有了，created的时候localstorage的token还没回来。

所以：
如果是在本页面刷新, 就会没有 token, 只能在 watch里面 进行监听
如果正常跳转 token 本身存在, 监听不到改变, 可以通过 watch 的 immediate 属性 实现

watch: {
    "$store.state.user.userInfo.token": {
      handler: function () {
        if (this.$store.state.user.userInfo.token) {
          this.$axios({
            url: "/airorders/" + this.$route.query.id,
            headers: {
              Authorization: "Bearer " + this.$store.state.user.userInfo.token,
            },
          }).then((res) => {
            console.log(res.data);
      },
      immediate: true,
    },
  },