<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="traceur.js"></script> <script src="BrowserSystem.js"></script> <script src="bootstrap.js"></script> <script src="vue.js"></script> <script src="vuex.js"></script> </head> <style> .abc{ width:100px;height:100px;background-color:red; } </style> <script> window.onload = function(){ const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '1...', done: true }, { id: 2, text: '2...', done: false } ], cout:1, }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) }, doneTodosCount: (state, getters) => { return getters.doneTodos.length; }, coutt:state => state.cout, }, mutations:{ incre(state,n){ state.cout += n.couts; } } }) new Vue({ el:"#app", computed:{ c(){ return store.getters.doneTodos; }, e(){ return store.getters.doneTodosCount; }, coutt(){ return store.getters.coutt; } }, data(){ return { d:store.getters.doneTodosCount, cout:store.getters.coutt, } }, methods:{ click(){ store.commit('incre',{couts:100}); } } }) } </script> <body> <div id="app" @click='click'> {{c}},{{e}},{{coutt}},{{cout}} </div> </body> </html>