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

 更新时间:2020年07月24日 11:17:18   作者:艾欢欢  
这篇文章主要介绍了vuex中store存储store.commit和store.dispatch的用法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

代码示例:

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的action的返回值(axios请求为例)

因为之前老师有讲过将vuex的封装。

今天就想尝试写一下,然后就封装了。

但是我想要在vue组件里面获取vuex的action的返回值

这里我用的dispatch调用 如图

我这里使用的new Promise的方法

调用getlunbolist的时候返回一个new Promise,把需要的值用resolve带出

在组件就可以用then的方法取出来使用

我只是一个小小白,我知道我的表述很生硬而且可能还不准备,但是意思就是大概这个意思。而且会坚持把我觉得有收获的内容下来的,希望以后成大佬了能自己来完善,当然大佬们看到问题了可以多多指点一下小弟。

以上这篇vuex中store存储store.commit和store.dispatch的用法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3使用quill富文本编辑器保姆级教程(附踩坑解决)

    vue3使用quill富文本编辑器保姆级教程(附踩坑解决)

    这篇文章主要给大家介绍了关于vue3使用quill富文本编辑器保姆级教程的相关资料,在许多网站和应用程序中富文本编辑器是一种常见的工具,它使用户能够以直观的方式创建和编辑文本内容,需要的朋友可以参考下
    2023-11-11
  • vue 实现数字滚动增加效果的实例代码

    vue 实现数字滚动增加效果的实例代码

    最近做了个项目需要做数字滚动增加的效果,刚开始接到这个项目还真是懵了,后来发现实现代码很简单的,下面小编给大家带来了vue 实现数字滚动增加效果的实例代码,需要的朋友参考下吧
    2018-07-07
  • Element-Plus Select组件实现滚动分页加载功能

    Element-Plus Select组件实现滚动分页加载功能

    Element-Plus的select组件并没有自带滚动分页加载的功能,其虽然提供了自定义下拉菜单的底部的方式可以自定义上一页及下一页操作按钮的方式进行分页加载切换,这篇文章主要介绍了Element-Plus Select组件实现滚动分页加载功能,需要的朋友可以参考下
    2024-03-03
  • vue2和vue3中provide/inject的基本用法示例

    vue2和vue3中provide/inject的基本用法示例

    Vue中的provide/inject是一种组件间通信的方式,它允许父组件向子组件传递数据,而不需要通过props或事件来实现,下面这篇文章主要给大家介绍了关于vue2/vue3中provide/inject的基本用法的相关资料,需要的朋友可以参考下
    2023-04-04
  • vue路由教程之静态路由

    vue路由教程之静态路由

    这篇文章主要给大家介绍了关于vue路由教程之静态路由的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 如何使用 Vue Router 的 meta 属性实现多种功能

    如何使用 Vue Router 的 meta 属性实现多种功能

    在Vue.js中,Vue Router 提供了强大的路由管理功能,通过meta属性,我们可以在路由定义中添加自定义元数据,以实现访问控制、页面标题设置、角色权限管理、页面过渡效果,本文将总结如何使用 meta 属性来实现这些常见的功能,感兴趣的朋友一起看看吧
    2024-06-06
  • 详解Vue This$Store总结

    详解Vue This$Store总结

    这篇文章主要介绍了详解Vue This$Store总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue3 中的 Vue-Router 和 VueX详解

    Vue3 中的 Vue-Router 和 VueX详解

    VueX 提供了一个全局都可以使用的数据管理仓库,不用考虑父子传值之类的问题,并且可以跨页面传递数据,提高了可维护性,这篇文章主要介绍了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以参考下
    2022-12-12
  • vue2从数据变化到视图变化之nextTick使用详解

    vue2从数据变化到视图变化之nextTick使用详解

    这篇文章主要为大家介绍了vue2从数据变化到视图变化之nextTick使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue组件之间通信方式实例总结【8种方式】

    vue组件之间通信方式实例总结【8种方式】

    这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,需要的朋友可以参考下
    2019-02-02

最新评论