State management is often necessary when building applications, but it can be challenging to implement, especially with large-scale applications. <\/p>\n\n\n\n
Your application’s size and features often dictate how large or complex your state management will be. Although keeping track of states in an application is not easy, it can be with the right tools for the job. This post aims to provide a high-level overview of one of the many ways in which state management can be handled in a Vue application using Pinia<\/a>.<\/p>\n\n\n\n First, what is a state? State means data in your application, which ranges from data from a database server or an API response, to data from the client side, like the input values on a contact form. State simply means data that exists in our application. <\/strong><\/p>\n\n\n\n As such, state management involves the process of creating, using, mutating, and sharing data across an application via components. In most cases, it relates to how user input or server data is handled. For instance, by filling out a form on a website, a user is adding new data\/state to the site or mutating an already existing state.<\/p>\n\n\n\n State management is often necessary for complex or large-scale applications, where multiple components or modules must share and coordinate their state to function properly. <\/p>\n\n\n\n State management becomes crucial when an application needs to remember data across multiple pages and components or when the application needs to keep track of user interactions. For example, a shopping cart application needs to remember what items have been added to the cart, and a web application needs to remember user preferences and settings. Without proper state management, applications would not be able to persist data and would then not be able to provide the expected functionality or user experience.<\/p>\n\n\n\n However, when managing complex states, relying on just the internal state management offered by a framework such as Vue may not always be sufficient. It can sometimes lead to something called props drilling<\/em>, a process of passing state down several unrelated components (that do not need it) to get said state to a deeply nested component that requires it. <\/p>\n\n\n\n This makes it more challenging to keep track of the state and to identify which components require the state because most of these components are simply “passage” points for the state to reach the component that needs it. As a result, this approach can result in confusion, especially in large-scale applications with hundreds of states. <\/p>\n\n\n\n State management is an essential topic in the frontend world, and the tools used depend on the particular framework being used. <\/p>\n\n\n\n Like other front-end JavaScript frameworks, Vue offers several options for managing a web application’s state, and each has its advantages and disadvantages. The appropriate choice will depend on the specific needs of the application. <\/p>\n\n\n\n Vuex<\/a> is the state management library created and maintained by the Vue team. It is a very complex yet powerful state management library that uses the Flux design pattern<\/a> which Facebook built. In the same way as Redux, the Vuex state management library uses unidirectional data flow to pass data between components, ensuring that the state can be mutated predictably. <\/p>\n\n\n\n It does this by providing a centralized store for storing and mutating application states, which serves as the only source of truth for all the components in a Vue application. <\/p>\n\n\n\n However, using mutations with Vuex is one of the things that gets tiresome. Changing the state of our store from a component requires us first to call an action, which then triggers the mutation. As a result, each state change requires a great deal of boilerplate and extremely verbose code.<\/p>\n\n\n\n Pinia is a relatively new state management library for Vue.js that aims to provide a more lightweight and simplified state management alternative to VueX. It uses a similar approach to VueX but with a more modular and customizable design. <\/p>\n\n\n\n Pinia was first introduced to the Vue ecosystem by a member of the core Vue 3 team as an experiment, but it quickly gained popularity and has become the official state management library recommended by the Vue team for Vue 3. The library is lightweight (1KB), straightforward to use, and does away with most of the complexity many developers dislike about the Vuex library.<\/p>\n\n\n\n In Pinia, states are defined by creating stores containing states, getters, and actions. Essentially, the store’s state defines what global data is managed, getters return computed or derived values from the state (or other getters), and actions are methods that perform asynchronous operations or execute business logic. <\/p>\n\n\n\n Pinia is relatively flexible as it can be used with the Composition API or Options API and allows developers to create plugins that can do a wide variety of things, like providing reusable functionality for stores. It also has strong support for Typescript, server-side-rendering (SSR), and hooks into Vue DevTools to facilitate easy debugging. <\/p>\n\n\n\n When comparing the two libraries, there are a few important advantages Pinia has over VueX:<\/p>\n\n\n\n Now that we have grasped Pinia and what it brings to the table, it is time to see a practical example of how it is used in a Vue application, as this will give us a better understanding of how to use it. We’ll be using a Vue CoderPad sandbox<\/a> for this article.<\/p>\n\n\n\n In the sandbox shell, install the Setting up a store in Pinia is very simple; first, we need to set up a folder structure that will help tell where the state and all its configurations live in the project folder. We will create a folder named Next, we create a Pinia instance \u2013 this is just a way to inject Pinia into the Vue app. It tells Vue there is an external library we intend to use alongside Vue internals. Otherwise, Vue won’t know we have a state library. <\/p>\n\n\n\n As the Next, we’ll set up a Pinia store that manages a Look confusing? Don’t worry. We’ll go through it and explain every line of code. <\/p>\n\n\n\n Let’s start with the first line, which is the importation of a function Then, we created an export function that exports all the The first argument accepted by the Furthermore, ensuring the store’s name reflects what you are storing in the state is a good and recommended practice. Since we are storing a count state that increases and decreases, we called our store The second argument passed to the The options object<\/strong> is the method we’ve opted for and is similar to Vue’s Options API<\/a>. We define it by passing an object containing our store’s state, getters, and actions property, as shown in the code snippet above.<\/p>\n\n\n\nWhat is state management?<\/h2>\n\n\n\n
When do we need state management?<\/h2>\n\n\n\n
Different options for state management in Vue<\/h2>\n\n\n\n
Vuex<\/h3>\n\n\n\n
Pinia<\/h3>\n\n\n\n
Other options<\/h3>\n\n\n\n
\n
VueX vs Pinia<\/h2>\n\n\n\n
\n
Creating a simple store with Pinia<\/h2>\n\n\n\n
pinia<\/code> library.<\/p>\n\n\nnpm i pinia<\/code><\/span><\/pre>\n\n\nSetting up a store in Pinia<\/h2>\n\n\n\n
stores<\/code> in the src<\/code> directory. As stated earlier, this will be the directory that houses all the state management logic. <\/p>\n\n\n\nmain.js<\/code> file is the entry point of a Vue application (the same way index.html<\/code> is the entry file of a website), we create an instance in this root directory, so a Pinia instance initializes once our app starts. So let’s create the Pinia instance by editing our main.js<\/code> to the code below:<\/p>\n\n\nimport<\/span> { createApp } from<\/span> 'vue'<\/span>\nimport<\/span> { createPinia } from<\/span> 'pinia'<\/span> \/\/ Import the createPinia function from Pinia<\/span>\nimport<\/span> App from<\/span> '.\/App.vue'<\/span>\n\nimport<\/span> '.\/assets\/main.css'<\/span>\n\nconst<\/span> app = createApp(App)\n\napp.use(createPinia()) \/\/ Create an instance of Pinia and injected it into the app.<\/span>\n\napp.mount('#app'<\/span>)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\ncount<\/code> state to give us a better understanding of how simple it is to set up a Pinia store. In the stores<\/code> folder, create a file counter.js<\/code> to store state logic relevant to the counter application. Add the following into it: <\/p>\n\n\nimport<\/span> { defineStore } from<\/span> \"pinia\"<\/span>;\n\nexport<\/span> const<\/span> useCounterStore = defineStore(\"counter\"<\/span>, {\n state<\/span>: ()<\/span> =><\/span> ({ count<\/span>: 0<\/span>, name<\/span>: \"David\"<\/span> }),\n getters<\/span>: {\n doubleCount<\/span>: (state<\/span>) =><\/span> state.count * 2<\/span>,\n },\n actions<\/span>: {\n increment() {\n this<\/span>.count++;\n },\n decrement() {\n this<\/span>.count--;\n },\n changeName() {\n this<\/span>.name = \"Franklin\"<\/span>;\n },\n \n },\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\ndefineStore<\/code>. As the name implies, this is a function imported from the Pinia package that lets us create an instance of a store, and it takes two arguments (more on that later).<\/p>\n\n\n\ndefineStore<\/code> state logic so it can be invoked in any Vue component to use this counter store. The naming convention typically begins with “use” and ends with “store” to help distinguish a function that manages state logic from other utility functions in our Vue application.<\/p>\n\n\n\ndefineStore<\/code> function is the name of the store you are creating or defining; this can be any name of your choice. However, it must be a unique name because Pinia uses it to connect the store to the dev tools. <\/p>\n\n\n\ncounter<\/code>.<\/p>\n\n\n\ndefineStore<\/code> function is of two kinds: a setup function<\/em> or an options object<\/em>.<\/p>\n\n\n\nOptions object<\/h3>\n\n\n\n
Setup function <\/h3>\n\n\n\n