// main.js
import Vue from 'vue'
import Vuex from 'vuex';
import App from './App.vue'
Vue.use(Vuex);
Vue.config.productionTip = false
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;
},
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id);
}
}
})
console.log(store.state.count);
new Vue({
store,
render: h => h(App),
}).$mount('#app')
// App.vue
<template>
<div id="app">
Complete Todos: {{ doneTodos }}<br/>
{{ doneTodosCount }}<br/>
{{ getTodoById }}
</div>
</template>
<script>
export default {
name: 'App',
computed: {
doneTodos () {
return this.$store.getters.doneTodos;
},
doneTodosCount () {
return this.$store.getters.doneTodosCount;
},
getTodoById () {
return this.$store.getters.getTodoById(2);
}
}
}
</script>