使用vuex从入门到应用(二)

上一篇文章中已经了解了vuex的简单应用,这一篇我们来看一下拓展。先看效果图:

效果图

上一篇讲到的使用vuex中的变量需要在计算属性中return this.$store.state.count;出来,但是当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余,所以,这个时候就出现了mapState 辅助函数帮助我们生成计算属性。如图:

组件引入mapState


vuex文件代码

代码块中写了两种,一个以数组引入,一个以对象引入,还写了一个mapState与局部计算属性混合使用的例子。

一样,我们在组件中使用 this.$store.commit('xxx') 提交 mutation,也可以使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。首先要引入。代码如下:

组件中引入mapMutations

因为都是写的一些较为简单的例子,就没有把代码上传到github上,如果有需要的小伙伴,我可以上传一下,如果有报错的小伙伴欢迎大家一起研究。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 742评论 0 3
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,970评论 0 7
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 397评论 0 0
  • 姓名:岳沁 学号:17101223458 转载自:http://blog.csdn.net/h5_queensty...
    丘之心阅读 2,164评论 0 1
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,160评论 0 6