思考,我为什么选vuex这个技术去做项目?

vuex选用他是因为对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,里面可以放一些公共共享的数据,里面的数据所有组件都可以拿到。vuex有五种属性分别是state getter mutation action module

vuex的实现原理:通过new.vuex.store创建了一个仓库,state是公共共享的对象存数据的,对应的一般是vue对象里面的data,mutations:使用他来修改state和getters数据,getters:类似vue中的计算属性,

action:类似于methods,可以用于发起异步请求,module是用于模块拆分。

这里面最重要的就是这个stste和mutations。

那么vue和vuex是怎么联系起来的呢?

在创建项目的时候vue-cli  我们直接选用vuex项,这样就不用做任何配置了,脚手架会自动帮我们完成。

1:我们要新建一个store文件夹,在这个文件夹下建立index.js文件。

在这里面我们要引入vue,在引入下vuex,还有使用下vuex,然后创建一个store仓库,里面有state。最后要导出这个store

2:我们要在vue实例中main.js中,注入store

3:使用:

在组件中我就可以用

this.$store.state.属性名来获取这个公共数据,

在模块中我就可以用{{$store.state.属性名}}获取,下面这个就是.user

4:那我要进行修改怎么办?

在组件中通过this.$store.commit('mutation事件名',mapper参数)可以修改state里面的数据。

那么mapState是干什么的呢?为什么要引入?

导入辅助函数mapState,他是vuex中定义的一个工具函数,在组件的内部去引用一下这个mapState  --- import { mapState } from 'vuex'  这样我在组件中就可以把公共数据映射到这个组件内部的计算属性当中,例如这样

 computed:{

    ...mapState(["user"])

  }

那么映射有什么用呢?

映射使你可以将 state 中的任何一种属性(state、getter、mutation 和 action)绑定到组件中的计算属性,并直接使用 state 中的数据。

当然没有映射我当然也可以进行访问state里面的值,但是需要调用getdata()方法然后写return this.$store.state.data,那么随着state的数据量变得很多里面有很多的对象,就会变得很不好看,而当我们有了映射以后我们可以访问用户中整个用户对象,把原先state的的对象添加到mapState方法中。例如user我们直接就可以调用这个user。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

我叫LiLi

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

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

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

打赏作者

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

抵扣说明:

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

余额充值