console
//仓库
const store = new Vuex.Store({
state: {
users: [{
name: 'jason',
id: 1,
female: false
}, {
name: 'molly',
id: 2,
female: true
}, {
name: 'steven',
id: 3,
female: false
}]
},
getters: {
// 过滤所有属性中female是true的对象
getFemaleUsers: state => state.users.filter(user => user.female)
}
});
//foo组件
const foo = {
template: `
<div>
femaleList: {{ femaleList }}
<div>
`,
computed: {
...Vuex.mapGetters({
femaleList: 'getFemaleUsers'
})
}
};
//App组件
const App = {
template: `
<div>
<foo></foo>
<div>
`,
components: {
foo
}
};
//挂载App
new Vue({
el: '#app',
store,
render: h => h(App)
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>