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>