JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.global.js"></script>
<div id="app">
  <my-component></my-component>
</div>

JavaScript

const { createStore } = Vuex

const store = createStore({
  state() {
    return {
      count: 1
    }
  },
  mutations: {
    increment(state, number) {
      state.count += number
    }
  }
})

const MyComponent = {
  template: `
    Count: {{ count }}
    <button @click="incr">Increment</button>
  `,

  methods: {
    incr() {
      this.$store.commit('increment', Math.random())
    }
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

const app = Vue.createApp({
  components: {
    MyComponent
  }
})

app.use(store)

app.mount('#app')