vuex
就是一个仓库,仓库里放了很多对象。其中state
就是数据源存放地,对应于一般vue
对象里面的data
state
里面存放的数据是响应式的,vue
组件从store
读取数据,若是store
中的数据发生改变,依赖这相数据的组件也会发生更新- 它通过
mapState
把全局的state
和getters
映射到当前组件的computed
计算属性
vuex
的使用借助官方提供的一张图来说明:
Vuex
有5种属性: 分别是state
、getter
、mutation
、action
、module
;
state
Vuex
使用单一状态树,即每个应用将仅仅包含一个store
实例,但单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据
mutations
mutations
定义的方法动态修改Vuex
的store
中的状态或数据。
getters
类似
vue
的计算属性,主要用来过滤一些数据
action
actions
可以理解为通过将mutations
里面处里数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view
层通过store.dispath
来分发action
。vuex
一般用于中大型web
单页应用中对应用的状态进行管理,对于一些组件间关系较为简单的小型应用,使用vuex
的必要性不是很大,因为完全可以用组件prop
属性或者事件来完成父子组件之间的通信,vuex
更多地用于解决跨组件通信以及作为数据中心集中式存储数据。- 使用
Vuex
解决非父子组件之间通信问题vuex
是通过将state
作为数据中心、各个组件共享state
实现跨组件通信的,此时的数据完全独立于组件,因此将组件间共享的数据置于State
中能有效解决多层级组件嵌套的跨组件通信问题 vuex
作为数据存储中心vuex
的State
在单页应用的开发中本身具有一个“数据库”的作用,可以将组件中用到的数据存储在State
中,并在Action
中封装数据读写的逻辑。这时候存在一个问题,一般什么样的数据会放在State
中呢? 目前主要有两种数据会使用vuex
进行管理: 1、组件之间全局共享的数据 2、通过后端异步请求的数据 比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态
一般面试官问到这里
vue
基本知识就差不多了, 如果更深入的研究就是和你探讨关于vue
的底层源码;或者是具体在项目中遇到的问题,下面列举几个项目中可能遇到的问题:
- 开发时,改变数组或者对象的数据,但是页面没有更新如何解决?
vue
弹窗后如何禁止滚动条滚动?- 如何在
vue
项目里正确地引用jquery
和jquery-ui
的插件