<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');
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.