vuex（篇4）——getters

Store中数据发生变化，Getters的数据也会跟随变化

vue组件中利用store的getter获取state的最新值

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: '...', done: true },
            { id: 2, text: '...', done: false }
          ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
          },
        doneTodosCount: (state, getters) => {
            return getters.doneTodos.length
          }
    }
})
export default store

vue中调用

方式1：通过属性访问

 <p>{{this.$store.getters.doneTodos}}</p>

方式2：

<p>{{doneTodosCount}}</p>

 computed: {
        doneTodosCount () {
             return this.$store.getters.doneTodosCount
        }
    }

方式3：在组件中，导入mapGetters函数

import  {mapGetters} from 'vuex'
//通过导入的mapGetters函数，将需要的getters函数映射为当前组件的computed方法
 computed: {
        ...mapGetters(['doneTodosCount'])
    }
//使用时，直接调用即可
<p>{{doneTodosCount}}</p>