详解VueX

时间:2021-2-20 作者:admin

1.VueX状态管理机制指的是建立一个“仓库”,所有组件再互不影响的情况下拿到“仓库”的值。

2.1) 新建store.js文件,并引入,在main.js中引入

2) state定义取值:

在要获取到值得组件中用$store.state.num获取

3) getters获取值:在store中定义getters,声明一个方法去拿值(state传参)

然后再要拿值的组件中的computed写获取data,我这里写的是getNum

此时便能拿到。但这种方法不提倡,具体见下文mapGetters的使用

4) mutations:同步对state中的数据进行操作。
在store中定义mutations,此时通过addNum方法对num+1

在要进行操作的组件中,定义一个按钮执行+1操作

在add方法中写,mutations中提交用commit提交,参数是定义在mutations里的方法

Mutations传参写法:在参数后定义一个data

同时在mutations中也去接收

5) actions:异步对state中的数据进行操作。本作者建议在对数据操作时采用actions方法。actions写法与mutations相似,通过异步回调mutations来达到修改数据的效果。先在store中声明actions,addByNumAction是定义在actions的方法,参数中的‘addA’值得是定义在mutations中的方法,data传的是参数

然后再要操作的组件中声明一个方法,通过dispatch提交

6) mapgetter获取定义在getters中的数据
先在getters中声明

Mapgetters需通过import mapGetters from ‘vuex’声明

在comptued中监听后便能使用了

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。