详解VueX

1,051 阅读1分钟

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