vuex 核心内容(学习总结)

     vuex的由来:在父子组件通信中,只有父组件通过props向子组件通信,传递数据,而子组件不能向父组件传递数据。这时候就出现了vuex。vuex作为数据的管理,将共享的数据单独的列出来,做一系列操作。通过注入到根组件,全局可用。

 

vuex有五大核心:

state:

共享的状态(-对象形式)

getters:

为了取得state的状态,就有了getters,getters对象是为了获取state数据。

mutations:

操作state状态,也可以说是监控state数据。但是mutations只能进行同步操作, 必须是同步函数。若为异步操作,就没办法同步捕捉到state的状态。通过$store.commit()函数显示调用(PS:参数一:mutations对象中对应函数的函数名,其余参数自定义,根据操作而定)      this.$store.commit('xxx') 提交 mutation

actions:

操作states状态,解决mutations没有异步的缺陷。action 提交的是 mutation,mutation直接变更状态。当某个动作触发多个mutation的时候使用action,每一个action 函数接受一个与 store 实例具有相同方法和属性的对象,比如叫做context对象,因此可以调用 context.commit 提交一个 mutation,通过 context.state 和 context.getters 来获取 state 和 getters

     this.$store.dispatch('xxx') 分发 action

Mouidle:
使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 。其实说简单一点儿就是,比如我们写一个商城,那么我们有很多数据,但不是说都一起管理,我们可以分开管理,比如购物车订单是一块数据,物品单价是一块数据,分开管理,用时引入即可,这样既方便又灵活
还有一种模块思想,就是分6个文件

state.js :在这里面定义一些组件之间的公用状态变量对象,然后export state对象

 getters.js :在这里面定义一些常量变量,它的值是函数的返回值,用于获取state.js中的对象的值;或者是当做store对象的计算属性,对state.js的属性对象进行计算,得到一些计算结果的变量,export多个常量

 mutation-types.js :在这里面定义一些操作mutation的字符串常量变量名,这里是定义一些动作名,所以名字一般是set  或者是update,然后再结合state.js中定义的变量对象,export多个常量

 mutation.js:在这里面定义一些修改state.js中变量对象的值的方法,这些方法都放在一个常量mutations对象里面,然后export mutations

 actions.js :在这里面定义一些常量方法,每个常量方法用于提交多个mutation,然后输出多个常量方法名

  store.js:在这里面去引入其他5个JS文件,然后export 一个Vuex.store({})的实例对象,然后再main.js文件里面import该js文件,在Vue实例里面添加store选项,即在根节点下注册该store对象

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DiuDiu_yang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值