vuex面试题总结

Vuex 面试题

1. Vuex中如何异步修改数据

   vuex基本使用流程为：在action中分发异步请求 在异步回调中 使用commit 提交mutation在mutation中修改state使用getters对state的值进行计算封装

2. 如何在模块中 访问全局内容

   • 若 使用 全局 state和 getter rootState 和 rootGetter 会作为第三和第四参数传入getter 也会通过context对象的属性传入 action

   • 若需要 在全局命名空间内 分发 action 或提交 mutation 将{root：true} 作为第三参数 传给 dispatch 或 commit 即可

3. vuex中 划分模块的好处

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

4. vuex的store特性

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

5. vuex 的 getter 特性是什么

   • 可以对 state 进行计算操作 它就是 store 的计算属性
   • 虽然在组件内也可以做计算属性 但是 getters 可以在多个组件之间复用
   • 如果一个状态只在一个组件内使用 可以不用 getters

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

   • 如果请求来的数据 是 不需要被其他组件公用 仅仅在请求的组件内使用 就不需要放入 vuex的 state中
   • 若被其他地方复用 则将请求放入action中 方便复用

7. actions和mutations的区别

   • mutation 更改 Vuex的store中的状态的唯一方法是 提交 mutation 每个mutation 都有一个 字符串的事件类型 和 一个回调函数 回调函数 就是进行状态更改的地方 且 接受 state 作为 第一个参数

     const store = new Vuex.Store({
       state: {
         count: 1
       },
       mutations: {
         increment (state) {
           // 变更状态
           state.count++
         }
       }
     })
     

   • Action 提交的是mutation 而不是直接变更状态 可以包含异步操作

     const store = new Vuex.Store({
       state: {
         count: 0
       },
       mutations: {
         increment (state) {
           state.count++
         }
       },
       actions: {
         increment (context) {
           context.commit('increment')
         }
       }
     })