vuex高频面试题 2023

每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。(这是核心概念,请确保记好,这个答不出来的话面试官就默认你完全不了解vuex了!)

1.什么是Vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

2. Vuex 和单纯的全局对象的区别?

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

3. 五个核心概念 参考地址

(1)State 简单来说就是存放公共数据的地方
(2)Getter 获取数据
(3)Mutation 唯一修改state的方法,同步
(4)Action 通过分发操作触发mutation,异步
(5)Mudule 将store模块分割,模块化,命名空间

State:
1.在 Vue 组件中获得 Vuex 状态

我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:

// 创建一个 Counter 组件
const Counter = {
  template: `
{{ count }}
`
, computed: { count () { return store.state.count } } }

每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。

然而,这种模式导致组件依赖全局状态单例。在模块化的构建系统中,在每个需要使用 state 的组件中需要频繁地导入,并且在测试组件时需要模拟状态。

Vuex 通过 Vue 的插件系统将 store 实例从根组件中“注入”到所有的子组件里。且子组件能通过 this.$store 访问到。让我们更新下 Counter 的实现:

const Counter = {
  template: `
{{ count }}
`
, computed: { count () { return this.$store.state.count } } }
2. mapState 辅助函数
3. 组件仍然保有局部状态

使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观

Getter

getter主要掌握访问方式

  • 通过属性访问
  • 通过方法访问

可以熟练地向面试官解释核心概念,vuex的面试就十拿九稳了,记得多用用可以加深理解。

你可能感兴趣的:(前端面试题,javascript,前端,vue.js)