Vuex 丨使用getters的多种方法 （二）

Vuex --> getters计算过滤操作

getters和computed类似，都是用来计算state然后生成新的数据。

我们要在不同的页面展示一个不同的数据，但是这个数据是我们通过同一个数据计算而带来的，在这里我们计算这个num，在不同的组件中展示

在store.js中配置

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        num:0
    },
    getters:{
        forList(state){
            let n = state.num + 1000;
            return n;
        },
        forLive(state){
            let n = state.num + 900;
            return n;
        }
    }
})

这是在List中

<template>
    <div id="list">
        {{forList}} //展示数据
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    export default {
        name: "list",
        computed:{
          ...mapGetters(['forList'])
        }
    }
</script>

<style scoped>
</style>

也可以同在Live中这样

<template>
    <div id="live">
        Live
        {{$store.getters.forLive}}
    </div>
</template>
<script>
    export default {
        name: "live"
    }
</script>
<style scoped>
</style>

大家也可以自己灵活配置