zoukankan      html  css  js  c++  java
  • vuex , 简单入(liao)门(jie)

    vuex什么 ? 

    官方的说法就是 vuex是专门为vue.js应用程序开发的 状态管理模式 。并采用集中式存储 , 管理应用的所有组件的状态 ,并以相同的规则保证状态以一种可预估的方式发生变化。

    自己理解的就是 vue提供的  前端数据管理仓库 。

    vuex中有五大核心概念 :

    1. state    

    就是为了存储数据而存在的。包括全局所有的状态  (或者叫做数据源)

    2.getter   (可以认为是 store的计算属性)   /* 补充:计算属性: 作用就是监听数据的变化 (个人理解), 每当state中的数据发生变化的时候都会重新求取计算属性 ,触发更新相关联的dom节点 */

    与计算属性相似 , getter 的返回值会根据自身的依赖被缓存起来 , 只有当他的依赖发生变化时才会被重新计算

    getter 被暴露后可以通过 store.getters 进行访问 (在组件中可以通过 this.$store.getters)

    参数方面 : getter允许state作为第一个参数,也可以接受其他getter作为第二个参数

    3.mutation    

    /* mutation是改变数据状态state的唯一方法 ,但是要注意的是mutation只支持同步方法 而不支持异步方法 */

    关于mutation个人感觉官方文档说的很清楚 :  (地址:https://vuex.vuejs.org/zh-cn/mutations.html)

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数

    你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法

    代码:store.commit('increment')

    在组件中可以通过使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

    4.action

    action类似于mutation  不同在于 :

    1.action提交的是mutation (上面有说到 mutation是改变state的唯一方法), 而不是直接变更state(数据状态)

    2.action可以包含任意的一部操作

    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

    action通过store.dispatch 方法来触发  代码如下:(括号中是要触发的action方法)

    store.dispatch('increment')   

      分发action

      在组件中分发action;

      在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store

     5.module

    module是为了解决 当所有状态都聚集到一个大对象中时 , store对象会变得臃肿问题 而存在的。

    vuex

    推荐文章:https://zhuanlan.zhihu.com/p/24357762  (个人感觉说的非常通俗易懂好理解)

  • 相关阅读:
    洛谷 P2677 超级书架 2 题解
    洛谷 P3957 跳房子 二分+DP检验+单调队列优化
    BZOJ 1030 AC自动机+DP
    SPOJ-EPALIN 字符串哈希 回文
    URAL-1989 树状数组+字符串哈希
    POJ-2774 字符串哈希+二分
    CCF 201709-5 除法(线段树)
    CCF CSP个人题解汇总
    CCF CSP历年一二题代码汇总
    CCF 201803-4 棋局评估 (对抗搜索)
  • 原文地址:https://www.cnblogs.com/wangrenmeng/p/8995799.html
Copyright © 2011-2022 走看看