# Update State Management with Pinia

DevFeed: [Update State Management with Pinia](<https://devfeed.tech/articles/update-state-management-with-pinia-23902.md>)

Original publisher: [Read original article](<https://medium.com/smg-real-estate/update-state-management-with-pinia-0d856a417535?source=rss----2186e5b9bd8f---4>)

Author: Dusko Peric

Published: 2024-03-21T14:43:21Z

Content type: article

Language: en

Sources: [Homegate Engineering Blog - Medium](<https://devfeed.tech/sources/homegate-engineering-blog-medium.md>)

Topics: [Vue.js](<https://devfeed.tech/topics/vue.md>), [Development](<https://devfeed.tech/topics/development.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [developer-experience](<https://devfeed.tech/tags/developer-experience.md>), [development](<https://devfeed.tech/tags/development.md>), [pinia](<https://devfeed.tech/tags/pinia.md>), [state-management](<https://devfeed.tech/tags/state-management.md>), [typescript](<https://devfeed.tech/tags/typescript.md>), [vue-js](<https://devfeed.tech/tags/vue-js.md>), [vuejs](<https://devfeed.tech/tags/vuejs.md>), [web-applications](<https://devfeed.tech/tags/web-applications.md>)

## AI overview

This article explains Pinia as a state-management option for Vue.js applications. It describes Pinia's component-like store structure, direct state updates within actions instead of mutations, modular stores, Option and Setup Stores, TypeScript support, Vue Devtools support, and its lightweight design.

## Source excerpt

In the development and maintenance of web applications, one of the crucial factors is the proper choice of state management. When it comes to Vue.js, we have two players in the game, where in my opinion, we have a clear winner. In this article, I will go through the functionalities brought by Pinia, which represent a step forward in this field. Intuitive API One of the problems in working with state is that it can very easily become confusing and complex. With its component-like structure, Pinia allows for easier understanding of how the store functions and interacts with your application. Let's look at an example to compare a Vue component with a Pinia store. Syntax similarity between Vue component and Pinia store This familiar syntax makes it a user-friendly and efficient solution for managing state. Excluding Mutations One of the key differences between Pinia and Vuex lies in the absence of mutations. In Vuex, the distinction between actions and mutations can become less clear-cut, particularly for complex stores. This redundancy can lead to repetitive code, adding unnecessary complexity to state management. Pinia takes a more direct approach. You can simply modify the state directly within actions. Let's see a code example to illustrate this concept: Vuex Store import { createStore } from 'vuex'; export default createStore({ state: { count: 0, }, mutations: { increment(state) { state.count++; // Update state through mutation }, }, actions: { increment({ commit }) { commit('increment'); // Dispatch mutation to update state }, }, }); Pinia Store import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++; // Directly update state within action }, }, }); In essence, Pinia removes an unnecessary layer of complexity by allowing direct state updates within actions. Modular stores design Pinia allow you to create multiple stores for different parts of your application,