vuex学习---mutation

阳光穿透心脏的1/2处 2023-05-30 11:59 155阅读 0赞

更改vuex中的store中的状态的唯一方法是提交mutation,

Mutation 必须是同步函数

store中的mutation代码如下;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70

.vue页面中的代码如下;当点击按钮的时候,执行方法increment,通过this.$store.commit(‘increment’) ,然后执行mutation中的increment方法,改变state中的count,页面中的count数值也会自动改变;20191110140946304.png

点击按钮,前面的数字会增加;

也可以在执行commit方法时,提交参数,例如:点击减少按钮时,执行uncrement方法,执行里面的this.$store.commit(),第二个参数就是传递的参数,

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 1

执行该方法后,会执行mutation中的uncrement方法,

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 2

提交mutation的另一种方式:是对象风格,

20191110142947988.png

Mutation 必须是同步函数

提交mutation时,还可以借助辅助函数,mapMutations ;

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70 3

发表评论

表情:
评论列表 (有 0 条评论,155人围观)

还没有评论,来说两句吧...

相关阅读