Vue 高频面试题-Vuex 相关问题

1、vuex是什么

Vuex是一个专为vue.js应用程序开发的状态管理模式。当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
1、多个视图依赖于同一状态（传参的方法对于多层嵌套的组件将会非常繁琐）
2、来自不同视图的行为需要变更同一状态（通常通过父子组件传递事件，复杂时会产生难以维护的代码）

vuex将共享状态抽取出来，以一个全局单例模式管理，通过一个应用使用一个store实例用来存储应用层级的状态；
如果其他组件需要访问某个全局状态通过store.state.属性名即可访问，若组件需要修改某个全局状态时只能通过调用store.commit(‘increment’) 来提交mutation更改数据；但是mutation 必须是同步函数，如果想要异步的修改需要调用store.dispatch（‘increment’)分发action，再由Action 提交的是 mutation，而不是Action直接变更状态。最后，根据State的变化，渲染到视图上。

2、Vuex核心概念有哪些

1、state => 基本数据(数据源存放地)
2、getters => 相当于store 中的计算属性（如果没有当我们需要根据state的数据派生时每个地方都得使用函数处理一下）
3、mutations => 提交更改数据的方法，同步
4、actions => 像一个装饰器，包裹mutations，使之可以异步。
5、modules => 将一个store实例分割模块

3、Vuex 为什么要分模块

模块:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

4、Mutation 和 Action 的区别

mutation是唯一修改state的途径，每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)，这个回调函数就是实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
而Action 可以包含任意异步操作，但不是直接修改state，action内部需要提交mutation来修改状态，action函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 提交一个 mutation。在视图更新时，是先触发actions在触发mutation。

store.commit('increment')

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

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

5、为什么 Vuex 的 mutation 中不能做异步操作？

每个mutation执行完成后都会对应到一个新的状态变更，如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

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

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

7、 Vuex 和 localStorage 的区别

1、应用场景不同，vuex是为vuejs程序开发的，解决组件直接数据共享问题，数据可以做到响应式，而 localStorage是本地存储技术，通过用来保存需要跨页面传递的数据，不能响应式；
2、vuex的数据是存储在内存中的，而localStorage是存储在本地，并且只能存储字符串类型的数据，存储对象需要JSON的stringify和parse方法进行处理。
3、vuex 刷新页面数据会丢失，而localstorage不会

8、Vuex和单纯的全局对象有什么区别？

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用

9、mapState 和 mapGetters 是干啥的

使用 mapState 辅助函数帮助我们生成计算属性

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

秒客网