vuex(二)getters
getters: 有时候,我们需要对state的数据进行筛选,过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据,那我们就必须到处重复写该计算属性函数;或者将其提取到一个公共的工具函数中,并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了,getters就是干这个的,你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数。那么,组件是如何获取经过getters过滤的数据呢? 过滤的数据会存放到$store.getters对象中。该方法为获取vuex中的数据
大家看这样一段代码:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); const store = new Vuex.Store({ state: { name: "Jack Chan", age: 18, }, mutations: { //接受页面参数,改变state中数据 }, getters: { age: function (state) { return state.age;//返回state数据中的年龄。 } }, actions: {} }); export default store
vue如下:
<template> <div> {{age}} </div> </template> <script> import store from '../../../utils/store'; export default { components: { }, data () { return {} }, computed: { age: function () { return store.getters.age; } }, } </script> <style scoped> </style>
打印结果为18,store.getters.age就是读取的getters过滤后的数据。
作者:狗尾草
-------------------------------------------
个性签名:海到无边天作岸,山登绝顶人为峰!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!