Search code examples
vue.jspinia

Vue JS : Pinia direct changes to state and $patch() which one is more performant or is better to use


I'm using Pinia with Vuejs 3 and I just want to know if using $patch() doesn't affect the performance of the app.

Which one is the best practice?

For example.

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => ({ count: 0 }),
  actions: {
    directIncrement() {
      this.count++
    },
    patchIncrement() {
      this.$patch({
         count: store.count + 1,
    },
  },
})

So which one is the best?

I want to know which one to chose to have the best performance and which one respects the best practices


Solution

  • If you have only one value to change, you may use like this.count++.

    But if you have multiple changes, you can use like

    this.$patch({
      count: store.count + 1,
      name: 'aa'
    })