vuex-基础讲解

vuex-基础讲解
一.介绍
本人出入前端半年,接触过两个上线的项目。第一次写博客,决定用vuex来开头
二.解释什么是vuex
官方解释:
Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。它还与Vue的官方devtools扩展集成,以提供零配置时间旅行调试和状态快照导出/导入等高级功能。
我认为vuex就是一个大的仓库,方便我们管理。在store里面配置了全局都可以随时调用然后对里面的值进行改变或者使用。
三.vuex包括什么
在一个具体的工程里面。1.我们可以在src文件下面建立一个store文件
2.在里面首先先建立一个index.js
在这里插入图片描述
在index.js里面创建这四个方法
四。具体讲解每个方法的用途
1.state是存需要管理的数据
let state={
userInfo: null,
saveUserInfo: null, //存你想要的数据我这里随便弄了两个做样子
}
这个时候就能在全局使用this.$state来调用数据了

2.mutation只有它可以改变state里面的值
const mutation={
SET_userInfo(state, result) {
state.userInfo = result
},
// 保存用户信息
SET_saveUserInfo(state, result) {
state.saveUserInfo = result
},
}
3.action是业务处理 可以做逻辑上的运算
在这里插入图片描述
4.geteer 是对state里面的数据进行监视
五.如何在vue里面使用vuex
在vue里面如果需要存数据则可以这样
this. s t o r e . c o m m i t ( ′ S E T q u e s t i o n L i s t ′ , r e s . d a t a . r e s u l t ) 第 一 个 参 数 为 自 己 m u t a t i o n 里 面 定 义 的 第 二 个 参 数 为 当 前 想 让 第 一 个 参 数 改 变 的 值 , 就 是 自 己 想 传 去 的 值 。 a w a i t t h i s . store.commit('SET_questionList', res.data.result) 第一个参数为自己mutation里面定义的 第二个参数为当前想让第一个参数改变的值,就是自己想传去的值。 await this. store.commit(SETquestionList,res.data.result)mutationawaitthis.store.dispatch(‘submitQuestionnaire’, {}
await 为异步获取数据 第一个参数为获取的接口,然后在{}在里面输入你想提取的数据。

第一次写感觉写的不好 ,先写这么多吧。等两天重新更新

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值