Vuex 面试题

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

Vuex是一个用于管理Vue.js应用程序状态的状态管理库。它将应用程序的状态存储在一个中央的地方, 并以响应式的方式进行更新。通过使用Vuex, 开发者可以更方便地在不同组件间共享和修改状态。

要使用Vuex, 首先要安装和引入它。可以使用npm或者yarn进行安装:


npm install vuex
# 或者
yarn add vuex

然后在Vue.js应用程序的入口文件中引入Vuex, 并将其作为Vue的插件来使用:


import Vue from 'kevin-notebook-next.github.io/src/pages/interview/vue2/vue.mdx'
import Vuex from 'vuex'
 
Vue.use(Vuex)

接下来, 需要创建一个Vuex store实例, 用于存储和管理应用程序的状态:


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

在上面的例子中, 我们定义了一个包含count状态的state, 以及一个用于修改count状态的mutation, 还有一个用于触发mutation的action, 以及一个用于获取派生状态的getter。

最后, 通过在Vue组件中使用Vuex提供的辅助函数(如mapState、mapMutations、mapActions、mapGetters等), 可以方便地在组件中访问和修改状态。

**Vuex适用于以下场景: **

多个组件需要共享和修改同一个状态。
需要在状态发生变化时进行响应式更新。
需要对状态进行一些处理或计算, 以生成派生状态(如计算属性)。
需要对状态的变化进行一些异步操作(如发起AJAX请求)。

总之, Vuex提供了一种统一的方式来管理应用程序的状态, 使得开发者能够更好地组织和维护状态逻辑。

2.vuex有哪几种属性?

有五种, 分别是 State、 Getter、Mutations 、Actions、 Modules

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法, 同步
actions => 像一个装饰器, 包裹mutations, 使之可以异步。
modules => 模块化Vuex

各模块在流程中的功能

Vue Components: Vue组件。HTML页面上, 负责接收用户操作等交互行为, 执行dispatch方法触发对应action进行回应。
dispatch: 操作行为触发方法, 是唯一能执行action的方法。
actions: 操作行为处理模块,由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。可以定义异步函数, 并在回调中提交mutation,就相当于异步更新了state中的字段
commit: 状态改变提交操作方法。对mutation进行提交, 是唯一能执行mutation的方法。
mutations: 状态改变操作方法, 由actions中的commit(‘mutation 名称’)来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作, 且方法名只能全局唯一。
state: state中存放页面共享的状态字段
getters: 相当于当前模块state的计算属性

2.为什么Vuex的mutation和 Redux 的reducer中不能做异步

每个mutation执行完成后都会对应到一个新的状态变更, 这样devtools就可以打个快照存下来, 然后就可以实现 time-travel 了。如果mutation支持异步操作, 就没有办法知道状态是何时更新的, 无法很好的进行状态的追踪, 给调试带来困难。
action 可以进行一系列的异步操作, 并且通过提交 mutation 来记录 action 产生的副作用(即状态变更)

3.Vuex的store特性是什么

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

4.vuex 的 getter 特性是什么

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

5.vuex 的 mutation 特性是什么

action 类似于 muation, 不同在于: action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作

6.vuex的state、getter、mutation、action、module特性分别是什么?

state: 存放公共数据的地方
getter: 获取根据业务场景处理返回的数据
mutations: 唯一修改state的方法, 修改过程是同步的
action: 异步处理, 通过分发操作触发mutation
module: 将store模块分割, 减少代码臃肿

7.你觉得要是不用vuex的话会带来哪些问题

组件之间传值麻烦复杂
可维护性会下降, 你要修改数据, 你得维护 3 个地方
可读性下降, 因为一个组件里的数据, 你根本就看不出来是从哪里来的
增加耦合, 大量的上传派发, 会让耦合性大大的增加, 本来 Vue 用 Component 就是为了减少耦合, 现在这么用, 和组件化的初衷相背

8.vuex中如何异步修改状态

在actions里面异步修改状态

actions与mutations作用类似, 都是可以对状态进行修改。不同的是actions是异步操作的。

actions是可以调用Mutations里的方法的