Vuex面试题

定义

什么是Vuex？

参考答案

Vuex是vue应用程序开发的状态管理插件，它采用集中式存储管理应用的所有组件的状态

Vuex解决了什么问题？

参考答案

• 多个组件依赖于统一状态时，对于多层嵌套的组件，传参将会非常繁琐， 并且对于兄弟组件间的状态传递无能为力
• 来自不同组件的行为需要变更统一状态， 以往采用父子组件直接引用胡总和通过事件来变更和同步状态的多份拷贝，以上的这些模式非常脆弱，通常会导致无法维护的代码

vuex使用场景？

参考答案

组件之间的状态，音乐播放、登录状态、加入购物车

什么时候用vuex？

参考答案

• 多个组件依赖于统一状态时
• 来自不同组件的行为需要变更统一状态

vuex的5个核心属性是什么？

参考答案

• state基本数据，数据源存放地
• getters从基本数据派生出来的数据
• mutations同步提交更改数据的方法
• actions异步提交事件
• modules模块化vuex

vuex中的状态存储在哪里，怎么改变？

参考答案

存储在state中，改变vuex的状态的唯一途径就是显示的提交（commit）mutation

this.$store.commit('SET_NUMBER', 1)

vuex中状态是对象时，使用时要注意什么？

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

辅助函数

怎么在组件中批量使用vuex的state状态？

参考答案

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

import {mapState} from 'vuex'
export default {
	computed: {
		...mapState({
			number: (state) => state.number,
			userId: (state) => state.price
		})
	}
}

怎么在组件中批量使用vuex的getter属性

参考答案

使用mapGetters辅助函数，利用对象展开运算符将getter混入computed对象中

import {mapGetters} from 'vuex'
export default {
	computed: {
		...mapGetters([
			'totalCount',
			'totalNumber'
		])
	}
	//取别名
	computed:{
		...mapGetters({
			myTotal:'total',
			myDiscountTotal:'discountTotal',
		})
	}
}

在组件中多次提交同一个mutation，怎么写使用更方便

参考答案

import {mapMutations} from 'vuex'
methods: {
	...mapMutations({
		setNumber: 'SET_NUMBER'
	})
}

然后调用this.setNumber(10)相当调用this.$store.commit('SET_NUMBER',10)

在组件中多次提交同一个action，怎么写使用更方便

参考答案

import {mapActions} from 'vuex'
methods: {
	...mapActions({
		setNumber: 'SET_NUMBER'
	})
}

然后调用this.setNumber(10)相当调用this.$store.dispatch('SET_NUMBER',10)

vuex和localStorage的区别

参考答案

• localStorage数据都存放在磁盘文件上，每次数据的读取都相当于一次磁盘读取、文件读取，读写硬盘开销高 vuex得数据是存放在内存中，读取速度自然会比localStorage快很多
• vuex是状态管理，全局的变量都应该放置到这里，方便查找维护，比较规范。
• vuex的数据是响应式的

vuex中action和mutation有什么区别？

参考答案

• action包含任何异步操作

  mutation只能是同步操作

• mutation可以直接变更状态

  action不能直接变更状态，它需要提交一个mutation

• 提交方式不同

  action是用dispatch提交，this.$store.dispatch('SET_ACTION', data)

  mutation是用commit提交，this.$store.commit('SET_NUMBER', 10)

vuex中action通常是异步的，那么如何知道action什么时候结束呢？

参考答案

在action函数中返回Promise，然后用then处理

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

参考答案

需要做vuex数据持久化

• 一般使用本地存储的方案来保存数据，可以自己设计存储方案
• 也可以使用第三方插件，比如vuex-persist,vuex-persistedstate

模块

vuex分什么要分模块？

参考答案

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象就会变得相当臃肿，为了解决

这个问题，vuex允许将store对象分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块

vuex模块怎么使用？

参考答案

在module文件夹中新建moduleA.js 和 moduleB.js文件，在文件中写入

const state = {

}
const getters = {

}
const mutations = {

}
const actions = {

}
export default {
	state,
	getters,
	mutations,
	actions
}

然后再index.js引入模块

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

在组件中怎么访问Vuex模块中的getter和state,怎么提交mutation和action？

参考答案

• 访问getters：this.$store.getters ，访问state：this.$store.state 
• 提交mutation：this.$store.commit('mutationA',data) 
• 提交action：this.$store.dispatch('actionA,data') 

命名空间·

什么是命名空间？

参考答案

默认情况下，模块内部的action、mutation、getter是注册在全局命名空间的，这样使得多个模块能够对同一mutation或action做出响应，如果希望模块具有更高的封装度和复用性，可以通过添加 namespaced: true 的方式使其成为带命名的模块。当模块被注册后，他所有getter、action、mutation都会自动根据模块注册的路径调整命名

怎么在带命名空间的模块内提交全局的mutation和action？

参考答案

将 { root: true } 作为第三参数传给 dispatch 或 commit 即可。

this.$store.dispatch('actionA', null, { root: true }) this.$store.commit('mutationA', null, { root: true })

怎么在带命名空间的模块内注册全局的action？

参考答案

在action函数事件里面加root:true

actions: {
	actionA: {
		root: true,
		handler (context, data) { ... }
	}
	}

组件中怎么提交带命名空间的moduleA中的mutationA？

参考答案 this.$store.commit('moduleA/mutationA',data)

createNamespacedHelpers是做什么得？怎么使用mapState，mapGetters，mapActions和mapMutations这些函数来绑定带命名空间的模块？

参考答案

首先使用createNamespacedHelpers创建基于某个命名空间辅助函数

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')
export default {
	computed: {
		// 在 `some/nested/module` 中查找
		...mapState({
		a: state => state.a,
		b: state => state.b
		})
	},
	methods: {
		// 在 `some/nested/module` 中查找
		...mapActions([
		'foo',
		'bar'
		])
	}
	}
	

vuex的严格模式是什么？有什么作用？怎么开启

参考答案

在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误，这能保证所有的状态变更都能被调试工具跟踪到

在vuex.store构造器选项中开启，如下

const store = new Vuex.store({
	strict: true
})

怎么引入vuex？

参考答案

• 先安装依赖npm install vuex --save
• 在项目目录src中建立store文件夹

• 在store文件夹中新建index.js文件，

  
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)
  const store = new Vuex.Store({
  	state: {
  
  	},
  	getters: {
  
  	},
  	mutations: {
  
  	},
  	actions: {
  
  	}
  })
  export default store
  
  

• 然后再main.js文件中引入vuex

  
  import Vue from 'vue'
  import Vuex from 'Vuex'
  import store from './store'
  new Vue({
  	$el: '#app',
  	store,
  })
  
  

 

参考答案