vuex(vue状态管理)

22 篇文章 1 订阅
2 篇文章 0 订阅

vuex

项目中有些数据需要用 vuex 来统一管理的,如登录token,用户信息,一些全局个人偏好设置等,用vuex管理更加的方便,具体当然还是要结合自己的业务场景的。业务之间的耦合度很低的就在每个页面存放自己的data就可以了。

  • 安装vuex,使用命令:npm install vuex --save(安装vuex保存到本地)
  • 在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,我们用来创建vuex实例,然后在该文件中引入vue和vuex,创建Vuex.Store实例保存到变量store中,最后使用export default导出store
  • 在main.js文件中引入该文件,在文件里面添加 import store from ‘./store’;,再在vue实例全局引入store对象
  • 开始编写vuex业务代码

store

const store = new Vuex.Store({
	state:{
		count:1
		}
})

然后在页面通过 this.$store.state来获取我们定义的数据

<span>{{this.$store.state.count}}</span>

Getter

Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里我们可以通过定义vuex的Getter来获取,Getters 可以用于监听、state中的值的变化,返回计算后的结果

const getters = {
	sidebar: state => state.app.sidebar,
	token: state => state.user.token,
	roles: state => state.user.roles
}
export default getters

Mutations

如果需要修改store中的值唯一的方法就是提交mutation来修改
修改index.js文件,添加mutations

mutations:{
	add(state){
		state,.count=state.count+1;
	}
}

在页面中使用:

addFun(){
	this.$store.commit("add");
}

Actions

然而官方建议提交一个actions,在actions中提交mutation再去修改状态值。
actions可以异步操作 ,让代码逻辑更清晰。它类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

在vuex2中, actions并不一定要, 但是mutation是必须要的, state的值, 只能通过mutation来编辑
修改index.js文件,先定义actions提交mutation的函数

actions:{
	addFun(context){
		context.commit("add");
	}
}

在页面使用:

addFun(){
	this.$store.dispatch("addFun");
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值