Vuex的用法及组成部分
1.Vuex是什么?
-
借鉴 了Flux、Redux、 The Elm Architecture
-
Vuex是专为vue.js设计的状态管理模式。
-
集中式存储和管理应用程序中所有组件的状态
-
Vuex 也集成到 Vue 的官方调试工具
-
一个 Vuex 应用的核心是 store(仓库,一个容器),store包含着你的应用中大部分的状态 (state)
2.什么情况下我应该使用 Vuex? -
不适用:小型简单应用,用 Vuex 是繁琐冗余的,更适合使用简单的 store 模式。
-
适用于:中大型单页应用,你可能会考虑如何把组件的共享状态抽取出来,以一个全局单例模式管理,不管在哪个组件,都能获取状态/触发行为,解决问题如下:
① 多个视图使用于同一状态:
传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力
② 不同视图需要变更同一状态:
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护的代码
3.Vuex组成部分:
state:进行组件共享数据的集中存储{}
getters:原理computed 用于返回最新的数据值{计算属性写法}
mutations:唯一一个能够修改state里面数据的地方-(函数)-不能做异步
actions:处理异步请求-异步调用mutations函数
modules:模块 当数据比较多的情况下,而且数据之前没有什么关系,用模块划分,每一个模块对象都包含以上4部分
同时提供了3个对象:
mapState:mapState对象辅助操作state,拿到state里的一些数据
mapGetters:mapGetters辅助操作getters通过计算属性返回的一些新的数据值
mapActions:mapActions辅助操作actions函数的调用
commit 同步调用mutations方法
disptatch 异步调用actions方法
3.使用
安装:
npm i vuex --save-dev
创建一个目录store然后配置个主文件index.js
可以直接在index.js里写那5部分,但是为了后期好管理,可以写成单独的文件。
有几大组成部分就建几个js文件
state里放数据的,var一个对象然后在暴露出去
用state要把它接过来并且挂载到vuex对象上。
mutations是操作state数据的,直接把state传到函数中就能解析
再把mutations引入到index.js中。
由于需要对vue的实例化对象操作,需要在vue主文件中去
获取数据的话有来种方式:
要在页面展示数据可以直接取:
还有一种就是间接取(通过mapState):
用这个方法需要把通过vuex中引进过来
需要在computed这个计算属性中来获取数据,因为state有多个数据,用扩展运算符接收并用数组存
操作数据mutations
通过comit()来调用mutations里的函数
getters的操作,声明好了以后,也需要挂载到index.js上。
getters的数据获取(mapGetters)
actions是对mutations里事件和数据做异步操作的(actions里操作的事件要和mutations里的一致,调用mutations里的函数都是通过commit()):
用的话直接起事件相同的名字,都要借助mapActions
因为属于事件行为,所以和methods相关,所以要写到methods中
actions有第二种方法,通过dispatch()的方法调用;
modules的数据获取,modules是当数据过多是可以分成很多模块管理;
modules里面的state直接获取数据不一样,其他的都是一样的: