Vuex Getter 计算过滤操作

添加状态

给 state 添加一个空数组常量 todos

修改状态

利用 mutations 修改 state 中 todos 数组

提交载荷

调用 store.commit 方法,提交 todos 数组

getter

在 store 中定义“getter”(可以认为是 store 的计算属性),就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数:

上述代码要对store.js文件中的todos进行一个计算属性的操作,就是在它输出前,将 done 为 false 的元素过滤掉

通过属性访问

getter 会暴露为 store.getters 对象,可以以属性的形式访问这些值:

过滤后的 todos 输出为:

Getter 也可以接受其他 getter 作为第二个参数:

注意:getter 在通过属性访问时是作为 Vue 的响应式系统的一部分缓存其中的

通过方法访问

可以通过让 getter 返回一个函数,来实现给 getter 传参。在对 store 里的数组进行查询时非常有用。

注意:getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。

mapGetters 辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

对象风格的提交方式

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

推荐阅读更多精彩内容

  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 744评论 0 3
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 403评论 0 0
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,972评论 0 7
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,163评论 1 32
  • State 单一状态树 Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“...
    peng凯阅读 714评论 2 0