引言:逆战!逆战!逆战!自进圈的时间来算也不算太短了,从一个菜鸟一步步到现在,很早就在想要不要玩玩CSDN,一进圈的时候朋友和师兄前辈都说CSDN的广告很糟心,在面对百度编程的过程中也亲眼见过这恶心的广告,所以也一直在用知乎,一是没进圈之前就在用知乎了,所以索性就不改了。二也是之前在手机有知乎的APP,比较熟悉。但是看到朋友们也都在用,说对发展有帮助,也就过来看看了,这是个人对vuex的一些总结和粗略见解。
vuex
描述:在我看来vuex是用来集中管理那些你在项目中组件中需要用到的全局数据和全局的方法,方便我们在各个组件中引入和使用,这都减少了我们的代码量,也比较简洁很多
全局状态管理
- 多组件共享状态 多个组件使用同一个数据
- 任何一个组件发生改变 其他的组件也要跟着发生相应的变化
基本使用
- 下载 npm install vuex(也可以在创建项目中勾选Vuex时初始化,这样就不用再用npm做下载引入了)
- 创建全局状态管理的实例
- 注册
- 在组件里使用全局状态值
a.获取渲染全局状态值
b.修改全局状态值
5大核心(重点)
state 全局状态数据
mutation 规定只有mutation才能修改state 通过commit方法触发
action 可以放异步操作 触发mutation 通过dispatch 触发
getter vuex里的计算属性 和state值进行关联 state发生改变
可以重新计算,并且可以在页面上直接使用
module 模块化开发,主要是为了防止多个模块开发中各个模块的命名重复冲突和抽离每个模块的代码,使我们的代码条理更清晰和整洁(但是要注意路径引入的问题)
action 存放异步
- 统一管理异步请求减少代码量
- 时间旅行更加准确 vue的开发者工具
模块化
- 模块化之后state的取值需要添加一级模块名 其他的三个核心不变
- 可以在模块里添加命名空间 作用就是在 mutation getters actions的名字前面 添加模块名
用处就是防止名字冲突
vue开发者工具
开发者工具绿了 该网页一定是vue做的
vue做的网页开发者工具不一定绿
最简版
- 组件里通过 $store.state 获取全局状态数据进行渲染
- 通过 $store.commit 方法触发mutation 修改全局状态值 整个页面都会变
- 所有vuex中数据的改变都要通过mutation操作,其他的无论什么操作,最后的一步都是转到mutation进行改变state里的数据
稍微复杂版
- 组件里通过 $store.state 获取全局状态数据进行渲染
- 通过 $store.dispath方法 触发action里的方法
- action 触发mutation进行修改全局状态值
辅助函数
帮助我们减少代码量
值类型向计算属性映射(mapState,mapGetters)
mapState 将全局状态管理的state值映射到使用组价的计算属性
mapGetters 将全局状态管理的getters值映射到使用组价的计算属性
函数类型向methods进行映射(mapMutations,mapActions)
mapMutations 将mutation的值映射到 方法里
mapActions 将actions里的值映射到方法
这里特别要注意引入的问题,简洁的办法会用到ES6中的解构,还有就是加了模块化之后引路径中有’/'的用法
要用到[ ]进行处理。
这只是大概我的理解,如有理解错误,欢迎指出!