Pinia vs Vuex

Pinia and Vuex are both state management libraries for Vue.js, a popular JavaScript framework for building user interfaces.

Pinia

Pinia is a lightweight alternative to Vuex that focuses on providing a simple and intuitive API. Here is an example of how to use Pinia to manage state in a Vue.js app:

import { createStore } from 'pinia'

const store = createStore({
  id: 'my-app-store',
  state: () => ({
    count: 0
  }),
  actions: {
    increment(state) {
      state.count++
    }
  }
})

// Use the store in a component
export default {
  setup() {
    return {
      count: store.state.count,
      increment: store.actions.increment
    }
  }
}

Vuex

Vuex, on the other hand, is a more feature-rich state management library that uses a centralized store to manage state in your application. Here is an example of how you might use Vuex to manage state in a Vue.js app:

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// Use the store in a component
export default {
  computed: {
    count() {
      return store.state.count
    }
  },
  methods: {
    increment() {
      store.commit('increment')
    }
  }
}

Which one should you choose?

In general, whether you use Pinia or Vuex depends on your needs and preferences, but let's not forget that VueJS' official documentation now recommends using it with PiniaJS. Pinia offers a simpler API and is easier to learn, but may not have all the features of Vuex. Vuex, on the other hand, is more feature-rich but may require more code and have a steeper learning curve.