欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuex中store存储store.commit和store.dispatch的区别及用法

程序员文章站 2022-07-09 19:15:16
...

代码示例:

this.$store.commit('loginStatus', 1);
this.$store.dispatch('isLogin', true);

规范的使用方式:

// 以载荷形式
store.commit('increment',{
  amount: 10   //这是额外的参数
})

// 或者使用对象风格的提交方式
store.commit({
  type: 'increment',
  amount: 10   //这是额外的参数
})

主要区别:

dispatch:含有异步操作,数据提交至 actions ,可用于向后台提交数据

写法示例:

 this.$store.dispatch('isLogin', true);

commit:同步操作,数据提交至 mutations ,可用于登录成功后读取用户信息写到缓存里

写法示例:

 this.$store.commit('loginStatus', 1);

两者都可以以载荷形式或者对象风格的方式进行提交。

参考:

vuex的安装和简单使用

vuex使用总结和详解