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过滤后的数据。
相关文章
相关标签/搜索