「经典题」Vuex常见面试题大全汇总--史上最全【vuex面试题】_vuex面试题必问

一.vuex是什么？怎么使用？哪种功能场景使用它？

        Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说就是：应用遇到多个组件共享状态时，使用vuex。

场景：多个组件共享数据或者是跨组件传递数据时，

比如：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

怎么使用？

vue框架中状态管理。在main.js引入store，注入。
新建了一个目录store.js，…… export 。

vuex的流程

        页面通过mapAction异步提交事件到action。action通过commit把对应参数同步提交到mutation，mutation会修改state中对应的值。最后通过getter把对应值跑出去，在页面的计算属性中，通过，mapGetter来动态获取state中的值

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

有五种,分别是State , Getter , Mutation , Action , Module (就是mapAction)

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

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

三、vuex的state、getter、mutation、action、module特性分别是什么？

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

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

放在localStorage 或者sessionStorage中 ，或者借用辅助插vuex-persistedstate。

vuex-persistedstate的createPersistedState()方法

五、使用vuex的优势是什么？

        作为全局变量来用；vue是单向数据流，有一个vuex来建一个”全局仓库“，可以减少很多开发时候的”传参地狱“。其实vuex中的所有功能都能够通过其他的方式进行实现，只不过vuex对这些方法进行了整合处理，使用起来更加便捷，同时也便于维护。

六、vuex五种状态的特性是什么

1、vuex 的 store 特性是什么
vuex 就是一个仓库，仓库里放了很多对象。其中 state 就是数据源存放地，对应于一般 vue 对象里面的 data，state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
2、vuex 的 getter 特性是什么
getter 可以对 state 进行计算操作，它就是 store 的计算属性
虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用
如果一个状态只在一个组件内使用，是可以不用 getters
3、vuex 的 mutation 特性是什么
action 类似于 muation, 不同在于：action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作

七、vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中？请求数据是写在组件的methods中还是在vuex的action中？

        如果请求的数据是多个组件共享的，为了方便只写一份，就写vuex里面，如果是组件独用的就写在当前组件里面。

如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex 的 state 里

如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

八、怎么监听vuex数据的变化？

        先用计算属性、然后再监听

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

答：放在对象里面

十、你觉得vuex有什么缺点？

答：页面刷新时会使state的数据初始化

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

答：组件之间传值麻烦复杂

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

十二、vuex 原理

        vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

        vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

十三、使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？

        Vue.use(Vuex) 方法执行的是 install 方法，它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store。

十四、Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的？vuex怎么知道state是通过mutation修改还是外部直接修改的？

通过$watch监听mutation的commit函数中_committing是否为true；严格模式下不允许直接修改。

Vuex 中修改 state 的唯一渠道就是执行 commit('xx', payload) 方法，其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true，然后才能修改 state，修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state，但是并没有修改_committing 标志位，所以只要 watch 一下 state，state change 时判断是否_committing 值为 true，即可判断修改的合法性。
 

十五、vuex怎样赋值？vuex存储数据的方法有哪些？

使用下面这两种方法存储数据：

　　dispatch：异步操作，写法： this.$store.dispatch('actions方法名',值)

　　commit：同步操作，写法：this.$store.commit('mutations方法名',值)

十六.Vuex中如何异步修改状态

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

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

const actions={
	addActions(context){
		context.commit('add',10);//调用mutations中的方法
		setTimeout(()=>{context.commit('reduce')},5000)
	//	setTimeOut(()=>{context.commit('reduce')},3000);
		console.log('我比reduce提前执行');
	},
	
	reduceActions({commit}){
		commit('reduce');
	}
}

十七、Vuex中状态储存在哪里，怎么改变它？

答:存储在state中，改变Vuex中的状态的唯一途径就是显式地提交 (commit) mutation。

十八、Vuex中状态是对象时，使用时要注意什么？

答:对象是引用类型，复制后改变属性还是会影响原始数据，这样会改变state里面的状态，是不允许，所以先用深度克隆复制对象，再修改。

十九、怎么在组件中批量使用Vuex的state状态？

答:使用mapState辅助函数, 利用对象展开运算符将state混入computed对象中

import {mapState} from 'vuex' export default{ computed:{ ...mapState(['price','number']) } }

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

答：把状态全部集中在状态树上，非常难以维护。按模块分成多个module，状态树延伸多个分支，模块的状态内聚，主枝干放全局共享状态

二十一、vuex一个例子方法

在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js

在store文件下的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})
 
export default store

　在store文件下的getters.js中引入

const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}
 
export default getters

在modules文件下的user.js写代码

const user = {
  state:{
      self: null,
      token: '',
  },
  mutations:{
      SET_SELF: (state, self) => {
           state.self = self
       },
       SET_TOKEN: (state, token) => {
           state.token = token
       }
  },
  actions:{
       login ({ commit }, res) {
            commit('SET_SELF', res.self)
            commit('SET_TOKEN', res.token)
      }
   }
}
export default user