vuexgetters

Posted bgwhite

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuexgetters相关的知识,希望对你有一定的参考价值。

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过滤后的数据。

以上是关于vuexgetters的主要内容,如果未能解决你的问题,请参考以下文章

单元测试依赖于其他 getter 的 Vuex getter

Vuex Getters 是不是返回对状态的引用(数组、对象等)?

Vuex getter无法更新状态更改

Vuex Getter 未定义

从 Vue-Router 调用 vuex getter

如何在 Mocha 单元测试中访问命名空间的 Vuex getter