<div id="app">
<h2>Store的简单使用</h2>
<div>
{{ $store.state.count }}
</div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
}
})
new Vue({
el: "#app",
store,
methods: {
increment(){
this.$store.commit('increment')
},
decrement(){
this.$store.commit('decrement')
},
toggle: function(todo){
todo.done = !todo.done
}
}
})
External CSS
This Pen doesn't use any external CSS resources.