Why using Pinia instead of Vuex ?<\/h2>\n\n\n\n
First of all, Pinia is now the state management tool officially recommended in Vue documentation. It has been mentioned as the version 5 of Vuex.
With Pinia, you can forget about mutations, no need to worry about its complex verbosity. It fully supports TypeScript and provides autocompletion even in JavaScript. It\u2019s also light, modular and extensible.<\/p>\n\n\n\n
Creating our Vue app<\/h2>\n\n\n\n
Just before creating the app, notice that I\u2019m using Vue cli version 5.0.8 and npm version 9.5.1. As you can notice, we directly have the possibility to Add Pinia to our new project. We also choose to enable TypeScript, Vue Router, ESLint and Prettier.<\/p>\n\n\n\n Then, follow the step indicated by the Vue cli:<\/p>\n\n\n\n Your project is now ready to start and afterwards you can open it the browser.<\/p>\n\n\n\n If you press \u201co\u201d from the Vue cli, it\u2019ll open a new window in your browser.<\/p>\n\n\n\n By default, many files are generated in the project, we don’t need it for our app and we can therefore clean it. You can also delete AboutView.vue in views folder.<\/p>\n\n\n\n Next, clean the following files:<\/p>\n\n\n\n As we added Pinia when creating our Vue project, it has updated our main.ts file to use Pinia and generated an example store in src\/stores<\/strong>. main.ts:<\/p>\n\n\n\n In the import statements, you can see the function createPinia. Concerning the Store file, let\u2019s have a look in detail:<\/p>\n\n\n\n The first thing to notice is that the store is written as a Setup Store. Setup Store is a syntax to define stores. It\u2019s similar to the Vue Composition API\u2019s setup function. You can also write store file as Option Stores, similar to Vue\u2019s options API. This line imports the This line imports the This line exports a Pinia store called This line creates a reactive reference ( This line creates a computed property named This line defines a function named This line returns an object containing the Time to use our store !<\/p>\n\n\n\n Usually you should create a component that you\u2019d call in a view file, but here, as the goal is to understand how to use Pinia, we\u2019ll simply use HomeView.vue. Let\u2019s have a deep dive to understand what\u2019s going on in there:<\/p>\n\n\n\n The script section of the file is declared with setup attribute. It enables the new setup syntax in Vue 3, which simplifies the way we define data, computed properties, and methods.<\/p>\n\n\n\n In the script section, we first import the useCounterStore function from our store file.<\/p>\n\n\n\n This line calls the useCounterStore function to create an instance of the counter store and stores it in the counter variable (Remember that our function useCounterStore() returns an object). This instance will be reactive, meaning any changes to the state or computed properties in the store will automatically trigger updates in the template where counter is used.<\/p>\n\n\n\n Looking at the template section now, it contains the HTML structure that defines the visual representation of the component.<\/p>\n\n\n\n It contains two paragraphs (<p>) that display the count and doubleCount properties from the counter object, respectively. There is also a button that calls the increment method when clicked.<\/p>\n\n\n\n You can now test the application by running the \u201cnpm run dev\u201d command in your terminal and then open it in the browser with \u201co\u201d.<\/p>\n\n\n\n Click on the increment button, you should directly see the updated values.<\/p>\n\n\n\n The advantage of using a state management tool like Pinia, is that the state of your store can be shared across your whole application. Let\u2019s verify it.<\/p>\n\n\n\n Create a new view File named CounterView.ts in your views folder.<\/p>\n\n\n\n Update the router file router\/index.ts so that you can access your new file through routing.<\/p>\n\n\n\n Import your new view file:<\/p>\n\n\n\n Add the following object into the routes array:<\/p>\n\n\n\n Add a link into the template section of each view file to navigate between them:<\/p>\n\n\n\n Now, if you click on the increment button and then click on the link to go to the counter page, you can see that the value of the counter property has also been updated there. To help you debug your Vue application and also to understand what is going on in your Pinia stores, I recommend you to install the Vue dev tools. In conclusion, we’ve embarked on a journey to set up our first Pinia store in a Vue application with TypeScript support. Through this blog, we’ve explored the key concepts of Pinia.<\/p>\n\n\n\n Thank you for joining me on this exploration of Pinia and Vue. With your newfound understanding, you’re now ready to create robust, reactive, and efficient applications that make the most of the power and simplicity that Pinia offers. Happy coding!<\/p>\n\n\n\n Pinia official documentation : https:\/\/pinia.vuejs.org\/introduction.html<\/a><\/p>\n\n\n\n
That said, we can start with the app creation.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/image001.png\")
<\/figure>\n\n\n\ncd pinia-blog\nnpm install\n<\/code><\/pre>\n\n\n\nnpm run dev<\/code><\/pre>\n\n\n\n![\"\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/image002-1024x534.png\")
<\/figure>\n\n\n\nCleaning automatically generated code<\/h2>\n\n\n\n
Before deleting the files, stop your server from the terminal with \u201cctrl+c\u201d or you will get some errors because of the missing files.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/image003.png\")
<\/figure>\n\n\n\n\n
import { createRouter, createWebHistory } from 'vue-router'\nimport HomeView from '..\/views\/HomeView.vue'\n\nconst router = createRouter({\n history: createWebHistory(import.meta.env.BASE_URL),\n routes: [\n {\n path: '\/',\n name: 'home',\n component: HomeView\n },\n ]\n})\n\nexport default router\n<\/code><\/pre>\n\n\n\n\n
<script setup lang=\"ts\">\nimport { RouterView } from 'vue-router'\n<\/script>\n\n<template>\n <RouterView \/>\n<\/template>\n<\/code><\/pre>\n\n\n\n\n
<script setup lang=\"ts\">\n<\/script>\n\n<template>\n <main>\n <\/main>\n<\/template>\n<\/code><\/pre>\n\n\n\nGenerated Store<\/h2>\n\n\n\n
For this blog, we\u2019ll use this example, let\u2019s have a look at it.<\/p>\n\n\n\nimport '.\/assets\/main.css'\n\nimport { createApp } from 'vue'\nimport { createPinia } from 'pinia'\n\nimport App from '.\/App.vue'\nimport router from '.\/router'\n\nconst app = createApp(App)\n\napp.use(createPinia())\napp.use(router)\n\napp.mount('#app')\n<\/code><\/pre>\n\n\n\n
It\u2019s used few lines later to create the Pinia root store and then it\u2019s passed to the app.<\/p>\n\n\n\nimport { ref, computed } from 'vue'\nimport { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore('counter', () => {\n const count = ref(0)\n const doubleCount = computed(() => count.value * 2)\n function increment() {\n count.value++\n }\n\n return { count, doubleCount, increment }\n})<\/code><\/pre>\n\n\n\n
From Vue documentation, \u201cSetup stores bring a lot more flexibility than Option Stores as you can create watchers within a store and freely use any composable. However, keep in mind that using composables will get more complex when using SSR.<\/em>
Setup stores are also able to rely on globally provided properties like the Router or the Route. Any property provided at the App level can be accessed from the store using inject()\u201d<\/em><\/p>\n\n\n\nimport { ref, computed } from 'vue'<\/code><\/code><\/pre>\n\n\n\nref<\/code> and computed<\/code> functions from the Vue library. ref<\/code> is used to create reactive references to values, and computed<\/code> is used to create computed properties that automatically update when their dependencies change.<\/p>\n\n\n\nimport { defineStore } from 'pinia'<\/code><\/code><\/pre>\n\n\n\ndefineStore<\/code> function from the Pinia library, used to define a store.<\/p>\n\n\n\nexport const useCounterStore = defineStore('counter', () => {<\/code><\/code><\/pre>\n\n\n\nuseCounterStore<\/code>. The defineStore<\/code> function is used to create a Pinia store and takes two arguments: a unique name for the store (in this case, 'counter'<\/code>), and a setup function that initializes the store’s state and methods.<\/p>\n\n\n\nconst count = ref(0)<\/code><\/code><\/pre>\n\n\n\nref<\/code>) named count<\/code> and initializes it with the value 0<\/code>. This will be our state variable representing the count in the counter store.<\/p>\n\n\n\nconst doubleCount = computed(() => count.value * 2)<\/code><\/code><\/pre>\n\n\n\ndoubleCount<\/code> using the computed<\/code> function. It calculates the double value of count<\/code> by multiplying count.value<\/code> by 2. The computed<\/code> property will automatically update whenever count<\/code> changes.<\/p>\n\n\n\nfunction increment() { count.value++ }<\/code><\/code><\/pre>\n\n\n\nincrement<\/code> that increments the value of count<\/code> by one. Since count<\/code> is a reactive reference, updating its value with count.value++<\/code> will automatically trigger reactivity and update any dependent computed properties.<\/p>\n\n\n\nreturn { count, doubleCount, increment }<\/code><\/code><\/pre>\n\n\n\ncount<\/code>, doubleCount<\/code>, and increment<\/code> properties. These properties represent the state (count), the computed property (doubleCount), and the method (increment) of the Pinia store. They will be accessible to components that use this store via the useCounterStore<\/code> store instance.<\/p>\n\n\n\nStore usage<\/h2>\n\n\n\n
We\u2019ll edit the file, simply to use the count, doubleCount and increment properties:<\/p>\n\n\n\n<template>\n <div>\n <h1>Home View<\/h1>\n <p>Count: {{ counter.count }}<\/p>\n <p>Double Count: {{ counter.doubleCount }}<\/p>\n <button @click=\"counter.increment()\">Increment<\/button>\n <\/div>\n<\/template>\n\n<script lang=\"ts\" setup>\nimport { useCounterStore } from '@\/stores\/counter'\n\nconst counter = useCounterStore()\n<\/script><\/code><\/pre>\n\n\n\n<script lang=\"ts\" setup><\/code><\/pre>\n\n\n\nimport { useCounterStore } from '@\/stores\/counter'<\/code><\/pre>\n\n\n\nconst counter = useCounterStore()<\/code><\/pre>\n\n\n\n<p>Count: {{ counter.count }}<\/p>\n<p>Double Count: {{ counter.doubleCount }}<\/p>\n<button @click=\"counter.increment()\">Increment<\/button><\/code><\/pre>\n\n\n\nTest the application<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/image004.png\")
<\/figure>\n\n\n\nSharing the data across multiple component<\/h2>\n\n\n\n
<template>\n <div>\n <h1>Counter View<\/h1>\n <p>Count: {{ counter.count }}<\/p>\n <p>Double Count: {{ counter.doubleCount }}<\/p>\n <button @click=\"counter.increment()\">Increment<\/button>\n <\/div>\n<\/template>\n\n<script lang=\"ts\" setup>\nimport { useCounterStore } from '@\/stores\/counter'\n\nconst counter = useCounterStore()\n<\/script>\n<\/code><\/pre>\n\n\n\nimport CounterView from '..\/views\/CounterView.vue'<\/code><\/pre>\n\n\n\n {\n path: '\/counter',\n name: 'counter',\n component: CounterView\n },<\/code><\/pre>\n\n\n\n\n
<!-- Router link to go to \"\/counter\" -->\n<router-link to=\"\/counter\">Go to Counter<\/router-link>\n<\/code><\/pre>\n\n\n\n\n
<!-- Router link to go to \"\/\" -->\n<router-link to=\"\/\">Go to Home<\/router-link><\/code><\/pre>\n\n\n\n
This is thanks to the state of the count property that is managed in Pinia.<\/p>\n\n\n\nBonus<\/h2>\n\n\n\n
It\u2019s a browser extension available from the dev panel.
For example, within our application it\u2019s useful to control the properties of our stores:<\/p>\n\n\n\n![\"\"](\"https:\/\/www.dbi-services.com\/blog\/wp-content\/uploads\/sites\/2\/2023\/07\/image005.png\")
<\/figure>\n\n\n\nConclusion<\/h2>\n\n\n\n
Useful Links<\/h2>\n\n\n\n