浅谈vuex状态管理

1.vuex是什么?
vuex是vue的一种数据状态管理工具。把vue项目中的公共的data放到一个地方储存起来,这样可以减少代码的重复率,如果是小型项目则不推荐使用vuex。这是vuex中文官网,具体可查看官网。

2.vuex中的核心内容

1.state 存放原始数据的成员(变量)
使用:在vue页面中可通过this. s t o r e . s t a t e . 变 量 名 来 获 取 定 义 的 数 据 2. g e t t e r s 对 数 据 获 取 之 前 的 再 次 编 译 , 可 以 为 s t a t e 的 计 算 属 性 。 使 用 : t h i s . store.state.变量名 来获取定义的数据 2.getters 对数据获取之前的再次编译,可以为state的计算属性。 使用:this. store.state.2.gettersstate使this.store.getters.函数名
3.mutations 修改数据的状态 并且是同步的。
使用:this. s t o r e . c o m m i t . ( ′ 函 数 名 ′ ) 4. a c t i o n s 因 为 在 m u t a t i o n 中 不 能 使 用 异 步 操 作 , 故 使 用 a c t i o n s 来 执 行 异 步 操 作 , 在 a c t i o n s 中 执 行 t h i s . c o m m i t ( ′ 函 数 名 ′ ) 对 m u t a t i o n s 中 的 函 数 进 行 操 作 。 使 用 : 在 v u e 页 面 中 t h i s . store.commit.('函数名') 4.actions 因为在mutation中不能使用异步操作,故使用actions来执行异步操作,在actions中执行this.commit('函数名')对mutations中的函数进行操作。 使用:在vue页面中 this. store.commit.()4.actionsmutation使使actionsactionsthis.commit()mutations使vuethis.store.dispatch(‘函数名’)
5.modules:模块化状态管理 Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

具体例子可查看 vuex的使用案例

熟悉上面的基础之后 这些成员还有对应的辅助函数
mapState mapGetters mapMutations mapActions 使用后可以简化代码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值