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中监听后便能使用了