JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/pinia.iife.js"></script>
<div id="app">
  <div>{{ userStore.email }}</div>
  <button @click="update">
    Update
  </button>
</div>

JavaScript

const { defineStore, createPinia, mapStores, PiniaVuePlugin } = Pinia

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

const useUserStore = defineStore('user', {
  state: () => {
    return {
      signedIn: false,
      email: '[email protected]',
    }
  },
  getters: {
    isSignedIn() {
      return this.signedIn
    }
  },
})

Vue.use(createPinia())

new Vue({
  pinia,
  computed: {
    ...mapStores(useUserStore)
  },
  methods: {
    update() {
      this.userStore.email = 'blah'
    }
  }
}).$mount('#app')