【vue】 面试题总结 - vuex

资源来自：https://developer.aliyun.com/ask/289308?spm=a2c6h.13066354.0.0.767533b5ZcyIwH

你有写过vuex中store的插件吗？

Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数：

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  });
};

然后像这样使用：

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
});

https://vuex.vuejs.org/zh/guide/plugins.html

你有使用过vuex的module吗？主要是在什么场景下使用？

当有多个不同模块的数据需要共享，就需要使用module分成成多个小模块使用
按模块分成多个module，状态树延伸多个分支，模块的状态内聚，主枝干放全局共享状态

vuex使用actions时不支持多参数传递怎么办？

以载荷或对象形式（Object）

你觉得vuex有什么缺点？

工具都是用来提高工作效率的，如果不能，那就说明工具用的不对。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。比如就几个状态的话 不用比较好

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

1.传参数时对于多层嵌套的组件将会非常繁琐，对于兄弟组件更是无法传递
2.当不同视图的行为需要去修改数据时，无法追踪到数据的变更方向，导致无法维护代码

vuex怎么知道state是通过mutation修改还是外部直接修改的？

通过$watch监听mutation的commit函数中**_committing**是否为true

请求数据是写在组件的methods中还是在vuex的action中？

根据业务场景划分，如果该请求数据的方法是多个视图共享的话，则写在action中，如果是当前视图所用，则写在组件的methods中

怎么监听vuex数据的变化？

官网的图显示 Devtools好像是监视mutation的调用 mark一下
//利用计算属性

 computed: {
        nowData() {
           return this.$store.state.nowData;
        }
  },

//监听执行

 watch: {
      nowData(val) {
         // doSomeThing
      }
  },

vuex的action和mutation的特性是什么？有什么区别？

Action
一些对 State 的异步操作可放在 Action 中，并通过在 Action 中 commit Mutation 变更状态
Action 可通过 store.dispatch() 方法触发，或者通过 mapActions 辅助函数将 vue 组件的 methods 映射成 store.dispatch() 调用

Mutation
在 vuex 的严格模式下，Mutaion 是 vuex 中改变 State 的唯一途径
Mutation 中只能是同步操作
通过 store.commit() 调用 Mutation

页面刷新后vuex的state数据丢失怎么解决？

首先要搞清楚为什么state数据会丢失。
通常情况state里的初始数据是空，通过mutation或者action的方法获取实际数据后存放在state中。这些方法往往是在某个组件（组件A）的生命周期或者事件中调用。
如果在刷新页面的时候这些方法没有被调用（例如此时页面中没有组件A，或组件A的对应事件没有被触发），那么就没有获取实际数据，state的数据就是初始的空。
对症下药，就是要确保刷新页面以后调用对应的获取数据方法。
最万金油的解决是在App.vue的mounted生命周期中去调用这些方法。不管在哪个路由下刷新页面，总会执行。

vuex的state、getter、mutation、action、module特性分别

state, 状态初始化, 并实施观察
getter, 获取数据用于view或data中使用
mutation: 内部处理state变化
action: 处理外部交互
module: 模块化以上四个

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

vuex的store有几个属性值？分别讲讲它们的作用是什么？

state:存贮公共数据的地方
Getters：获取公共数据的地方
mutations：放的是同步的操作和reducer有点像 通过store的commit方法来让mutations执行
action：放的是异步的操作 通过dispatch的方法让action里面的方法执行
context是store的一个副本

Vuex就是提供一个仓库，store仓库里面放了很多对象其中state即使数据源存放地，

你理解的vuex是什么呢？哪些场景会用到？不用会有问题吗？有哪些特性？

长期维护的项目，因为长期维护的项目不能保证3层组件设计。肯定会有第4层，依次类推项目越来越难维护。
从4层调第一层的方法太困难，中间有夹杂着其他的逻辑耦合。所有这个是我用vuex的目的，抽离公共的东西，到vuex方便维护

使用vuex的优势是什么？

便于进行全局或者局部的状态管理. 便于组件/插件/混合之间的联系
vue是单向数据流，有一个vuex来建一个”全局仓库“，可以减少很多开发时候的”传参地狱“