对vuex的理解

Vuex是什么

1.公共状态管理;解决多个非父子组件传值麻烦的问题;简单说就是多个页面都能用Vuex中store公共的数据
  1.并不是所有的数据都要放在Vuex中,只有各个组件公用的一些数据会放在Vuex当中
  
  2.Vuex是一个公共状态管理模式 并不是数据库 所以不可能持久保存一些数据
   当用户刷新浏览器的时候那么数据就有可能消失
   
  3.Vuex主要应用在大型的单页面开发中
  
2.vuex的特点

1.遵循单向数据流
  
2.Vuex中的数据是响应式的
  
3.vuex的流程图
在这里插入图片描述

vuex 的几个核心属性:

Vuex 使用一个 Store 对象管理应用的状态,一个 Store 包括 State, Getters, Mutations, Actions Modules五个属性。

State:State 意为“状态”,是 vuex 状态管理的数据源。

Getters:从基本数据(state)派生的数据,相当于state的计算属性

Mutations:Mutaion 是 vuex 中改变 State 的唯一途径(严格模式下),并且只能是同步操作。Mutaion 使得状态变得可追踪,配合一些 devtools 可以实现 time-travel 的调试体验。

Actions:一些对 State 的异步操作可以放在 Action 中,并通过在 Action 提交 Mutaion 变更状态。

Modules

1.每个模块都相当于一个小型的Vuex
 
2.每个模块里面都会有state getters actions mutations

3.切记在导出模块的时候 加一个 namespaced:true 主要的作用是将每个模块都有独立命名空间

独立命名空间

namespace:true

在多人协作开发的时候,由于个人单词量有限,可能子模块和主模块中的函数名字会相同,这样嗲用函数的时候,相同名字

的函数都会被调用,就会发生问题。

为了解决这个问题,上面提到了导出模块的时候要加namespace:true.

那么怎么调用子模块中的函数呢?假如我的子模块名字为todo.js。 函数名字就改成todo/函数名字。

 methods: { ...mapMutations(['tips'])}
vuex辅助函数

如果想要访问vuex.store中state中的数据,需要this.$store.state.属性名。显然这样访问数据写的代码很很不简洁的,辅助函数就是用来解决这个问题的。
1、辅助函数:

通过辅助函数mapState、mapActions、mapMutations,把vuex.store中的属性映射到vue实例身上,这样在vue实例中就能访问vuex.store中的属性了,对于操作vuex.store就很方便了。

state辅助函数为mapState,actions辅助函数为mapActions,mutations辅助函数为mapMutations。(Vuex实例身上有mapState、mapActions、mapMutations属性,属性值都是函数)

2、如何使用辅助函数

在当前组件中引入Vuex

通过Vuex来调用辅助函数

3、辅助函数如何去映射vuex.store中的属性

mapState:把state属性映射到computed身上

computed:{
     ...Vuex.mapState({
        input:state=>state.inputVal,
        n:state=>state.n
    })   
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值