Get started with pinia CDN

MIT licensed

Pinia is a state management library for Vue 3 applications.

Tags:
  • vue
  • vuex
  • store
  • pinia
  • piña
  • pigna
  • composition
  • api
  • setup
  • typed
  • typescript
  • ts
  • type
  • safe

Stable version

Copied!

How to start using pinia CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with pinia CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/pinia@2.1.7/pinia.min.js"></script>
  <script src="https://cdn.cdnhub.io/pinia/2.1.7/pinia.iife.js"></script>
</head>
<body>
  <button id="increment">Increment</button>
  <button id="decrement">Decrement</button>
  <script>
    import { createStore, ref } from 'pinia';

    const useCounterStore = createStore({
      id: 'counter',
      state: () => ({ count: ref(0) }),
      actions: {
        increment() {
          this.count.value++;
        },
        decrement() {
          this.count.value--;
        },
      },
    });

    const counterStore = useCounterStore();

    document.getElementById('increment').addEventListener('click', () => {
      counterStore.increment();
    });

    document.getElementById('decrement').addEventListener('click', () => {
      counterStore.decrement();
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions