关于Vuex的笔记

1.vuex的理解:

    1.集中管理组件的状态 
    2.为组件之间通信提供一套标准规则(最佳实践)
    vuex参考借鉴flux/Redux



2.如何将vuex引入工程:

    1.Vue.use(Vuex)
    2.new Vuex.store(){}

3.new Vuex.store(){}:

state(存放全局的属性),mutation(操作改变状态),actions(异步操作,包含多个mutation),getters(计算属性),modules(模块化)
    流程:【组件】   -- dispatch--> 【actions】 --- commit -- 【mutations】 ----> 【state】


4. mutations 的意义,为什么在 actions 和 state 之间加了 mutations ?

 不要直接改变状态,通过 mutations 改变状态(每一次 mutations 操作都是一个状态的快照,
    mutations 改变状态时,给状态创建了 快照(某一个时刻的版本)
    注意:操作的 【颗粒度】-------------------西瓜,苹果,李子,芝麻
    actions 动作:用户与系统()交互动作(业务操作): 包含多个数据操作(改变状态 mutation)
    actions 的颗粒度大于 mutations,
    mutations是用来改变状态的,actions除了改变状态,还可以做其他事。
    
    mutations 的意义以及同步异步的区别:
    1. 状态改变的快照(多个版本),可追踪撤销。
    2.颗粒度小于 actions,数据操作。
    3. mutations 操作必须是同步的,

    同步是一个操作开始到结束期间,阻塞(卡死) (不能超过 16毫秒/ 60帧)。
    注意:mutations 中不要执行网络访问。
    actions 是异步的 ,1.commit m1.          2.commit.m2             3.;
    如:洗菜,切菜,炒菜 是同步的
    同步:( 1 ---》2 ---〉3)
    异步: 0  ----> 1,   0 ----> 2,  0 ----> 3 异步(同时执行)


5.  组件中使用 store 中的资源,可以使用一些【辅助函数】:

   mapState, mapGetters ---> computed ---> View 上渲染(显示),
    不建议在 methods 中访问,能读取值,但是不能修改;怎么改?
     ---》 用 mutations 改变, 直接调用 mutations, actions
    
    若不使用map 
    this.$store.commit/dispatch 操作 ;  
    state|getters  读取值来渲染,推荐 map 获得更加简洁

注意:应用级别指的是多个组件使用的数据


    
 
    

发布了113 篇原创文章 · 获赞 130 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_44364444/article/details/104539900