vuex存储公共数据

本文详细介绍了如何使用Vuex进行状态管理,包括安装、引入、注册到Vue实例以及创建Vuex实例的过程。同时,讲解了如何在组件中访问Vuex中的状态和方法,帮助初学者快速掌握Vuex的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1:首先先下载 vuex
npm i vuex -S
2:然后引入vuex
import Vuex from ‘vuex’
3:注册到Vue实例上
Vue.use(Vuex)
4:创造一个Vuex实例

var store = new Vuex.Store({
	state:{  //  这里相当于Vue实例中的data,用于存放数据
		msg: '我是公共的数据,来拿我呀QAQ' 
	},
	mutations:{ //  这里相当于Vue实例中的methods,用于定义方法 所有的方法都过来拿
		getMsg(state){  // state是个形参 是state对象里面的数据都可以拿到 不通过this来拿
			state.msg 
		}
	},
	getters:{ 
	 // 这里可以监听state的值 直接返回出去 只读取值 如果需要修改值 找mutations  需要return出去
		readMsg(state) {
				return '我是store里面的数据' + state.msg
		}
	}
})

那么组件中如何拿到store储存的公共的值呢?

直接在组件中 用插值表达式 可以直接使用公共储蓄的值和方法

{{ $store.state.msg }} // 输出 我是公共的数据,来拿我呀QAQ
在这里插入图片描述

如果需要在组件的方法中拿到值 则还需要通过this 当前的实例对象拿到值
比如 this.$store.state.msg

如何拿到store里面的方法呢?
一般在组件定义的方法里面拿到store里面的方法 统一交给store操纵公共数据比较
易维护
通过 this.$store.commit(‘store里的方法名’, 传参的可选值) // 只能传一个值,但是可以传对象数组之类的过去
在这里插入图片描述

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值