<script src="//unpkg.com/vue@2.2.1/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.3.1"></script>
<div class="container">
<div id="app"></div>
</div>
html, body {
height: 100%
}
.container {
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 0 25px rgba(0,0,0,0.08);
transform: translateX(-50%) translateY(-50%);
width: 300px;
height: 200px;
padding-bottom: 20px;
}
.counter {
text-align: center;
font-size: 40px;
margin-bottom: 15px;
color: #4B1248;
}
button {
/* margin-right: 5px; */
padding: 10px 15px;
font-size: 20px;
background-image:linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
border: 1px solid #8fd3f4;
outline: none;
}
button:hover {
opacity: .8;
cursor: pointer;
}
.actions-inner {
display: flex;
justify-content: center
}
const store = new Vuex.Store({
state: {
counter: 0
},
getters: {
counter: state => state.counter * 2
},
mutations: {
increment: state => state.counter++,
decrement: state => state.counter--
}
})
var App = new Vue({
created: function() {
// console.log(this)
},
computed: {
counter: function() {
return this.$store.getters.counter
}
},
methods: {
increment: function () {
this.$store.commit('increment')
},
decrement: function () {
this.$store.commit('decrement')
}
},
template: `
<div>
<p class="counter">{{counter}}</p>
<div class="actions">
<div class="actions-inner">
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</div>
</div>
`,
store: store
});
App.$mount('#app');
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.