https://codepen.io/anon/pen/wypmjV?editors=1111
import Vuex from 'vuex'
import { mapGetters, mapMutations } from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: 'First', done: true },
{ id: 2, text: 'Second', done: false },
{ id: 3, text: 'Thirh', done: false }
]
},
getters: {
allTodos( state ) { return state.todos },
checkTodo1( state ) {
console.log( 'checkTodo 1' )
return state.todos.find(todo => todo.id===1).done
},
checkTodo: ( state ) => (id) => {
console.log( 'checkTodo', id )
return state.todos.find(todo => todo.id===id ).done
}
},
mutations: {
toggleDone( state, id ) {
const todo = state.todos.find(el => el.id === id );
todo.done = !todo.done;
}
}
})
new Vue({
el: '#app',
store,
template: `
<ul>
<li v-for='todo in allTodos'>
{{ checkTodo(todo.id) }}
<button @click='toggleDone(todo.id)'>
{{todo.text}}
</button>
</li>
<li> {{checkTodo1 }}</li>
</ul>`,
computed: {
... mapGetters(['allTodos', 'checkTodo', 'checkTodo1'])
},
methods: {
...mapMutations(['toggleDone'])
}
})