Why should I use Pinia instead of Classes?

[varna]

Why should anyone use Pinia instead of JS or TS Classes?

[posva]

https://pinia.esm.dev/introduction.html#why-should-i-use-pinia

[varna]

https://pinia.esm.dev/introduction.html#why-should-i-use-pinia

OK. It adds DX and SSR. Awesome, I love it! But what I actually meant to ask is:

Why should Pinia use defineStore pattern instead of Class

We already used vuex for large scale applications and know that plugins and mixins is the wrong way to code.
Having classes, interfaces and generics would allow us to write maintainable code.

Example of store in my work project which annoys the hell out of me:

import items from '../getters/_items'
import actions from '../getters/_actions'
import stock from '../getters/_stock'
import pending from '../getters/_pending'
import cost from '../getters/_cost'
import price from '../getters/_price'

const type = `chemical`

export default {
  namespaced: true,
  getters: {
    items: items(type),
    purchases: actions(type, 'purchases'),
    sell: actions(type, 'sell'),
    write_off: actions(type, 'write_off'),
    stock: stock(type),
    pending: pending(type),
    cost: cost(type),
    price: price(type),
    ...
}

It just feels like reinventing the wheel. Wouldn't this make more sense? I stole and updated the Cart from example: https://stackblitz.com/edit/github-eyireq?file=src/models/cart.js

Maybe we could create a DX, SSR friendly class called Pinia?

class Cart extends Pinia {
  // and now our cart has DX and SSR support
}

[varna]

Well... 2 years later I'm glad that I was wrong. Pinia is the greatest store library.

1. Simple API
2. Very very flexible. I'm very glad about useStore pattern.

@yukulele DX = Developer Experience.

Thank You @posva !

[yukulele]

I'm sorry to reopen the debate, but I'm not sure I understand what Pinia offers beyond the use of classes.

Why this:

// src/stores/counter.ts
import { ref, computed } from "vue";
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, doubleCount, increment };
});

<!-- src/components/TheCounter.vue-->
<script setup lang="ts">
import { useCounterStore } from '@/stores/counter.js';
const counterStore = useCounterStore()
</script>

<template>
  <div>count: {{ counterStore.count }}</div>
  <div>double: {{ counterStore.doubleCount }}</div>
  <button @click="counterStore.increment">+</button>
</template>

is better than this:

// src/stores/counter.ts
import { ref, computed } from "vue";

class CounterStore {
  count = ref(0);
  doubleCount = computed(() => this.count.value * 2);

  increment() {
    this.count.value++;
  }
}

export const counterStore = new CounterStore();

<!-- src/components/TheCounter.vue-->
<script setup lang="ts">
import { counterStore } from '@/stores/counter.js';
</script>

<template>
  <div>count: {{ counterStore.count }}</div>
  <div>double: {{ counterStore.doubleCount }}</div>
  <button @click="counterStore.increment">+</button>
</template>

?

[ilajosmanov]

I ask myself the same question :)
I mostly wanna use classes as services for my components (like in angular)

[pavi2410]

I agree with @yukulele. I love Pinia, but class is more familiar to me as it's a standard language feature.

@yukulele's class example can be improved like this:

// src/stores/counter.ts
import { ref, computed } from "vue";

class CounterStore {
  count = ref(0);

  // use native class getters
  get doubleCount() {
    return this.count.value * 2;
  }

  increment() {
    this.count.value++;
  }
}

// counterStore is now a Pinia store.
export const counterStore = pinia.createFromClass(new CounterStore());

[SkinnyArman]

@varna Sooo what was your experience that you found out Pinia is the best way for global state management?
I have previously used Vuex for a large scale application and the result was meh. If I were to go back I would have used just plain JS to create a singleton service like in Angular and pass it down to components using provide/inject.