Pinia is a lightweight state management library for vue.js, which is very popular among developers, especially recommended.

Pinia is a new Vue state management library, the replacement of Vuex in Vue ecology. What are its advantages? What’s better than Vuex? Let’s take a look at five of Pinia’s strengths.

  1. There is good support for Vue2 and Vue3, which means older projects can also use Pinia.
  2. Ditches the Mutations operation, leaving only state, getters and actions. Greatly simplifies the use of state management libraries, making code writing easier and more intuitive.
  3. No need for nested modules, compliance with Vue3’s Composition API, making code more flat.
  4. Full TypeScript support. One of the big advantages of the Vue3 version is TypeScript support, so Pinia has full support. If you’re familiar with Vuex, you know that the syntax support for TS is incomplete (and often mocked).
  5. The code is more concise, can achieve a good automatic code segmentation. In the era of Vue2, writing code requires scrolling around the screen to find variables, which is very troublesome. Vue3’s Composition API perfectly solves this problem. Automatic code splitting is possible, and Pinia inherited this advantage as well.

In a nutshell, Pinia’s advantages are a cleaner syntax, perfect Vue3 Composition API support, and perfect TypesCcript support. With these advantages and a strong recommendation from Ugod, it feels like Pinia will soon replace Vuex in Vue3. It’s time to get in the car and hug it.

​

Vue3 environment installation

Pina is Vue state management, so the Vue environment needs to be installed. Although Pinia is suitable for VUE2 and VUe3, vue3 can better reflect the advantages of Pinia and its application in TS, so vue3 project is used as an example here.

If you are not familiar with Vite, you can take a look at this to make a brief introduction to “With Vite, still need Webpack?” React can also use Vite, Vite may replace Webpack. If you are still determined to use Webpack, you can try it yourself. Here is not an introduction, you can also add QQ or wechat front-end technology group communication.

Here we use vite to initialize a vue project, go to the project directory and use the command line

npm init vite@latest
Copy the code

If the first installation will prompt

​

Typing y will take you to the project name

​

Then go to frame selection and select VUE

​

Then it will prompt whether to choose TS. Here we adopt THE way of TS. Ts has become a trend, and we should embrace it if we don’t understand it

​

And you end up with

​

Then follow the instructions, switch the directory installation dependency, a Vite vuE-TS project is good, below we start to use pinia operations.

​

Pinia small example

First, install pinia

npm install pinia# or with yarnyarn add pinia
Copy the code

Then, you can view the installed ones in package.json

​

If you see it later, the version of Pinia may also be different and updated. You can also install Pinia according to the version number here, or see the documentation of Pinia to keep up with the latest developments.

Once we’re all set, we’re sharpening our knives against Pinia.

Introduce Pinia in main.ts

Main.ts is the equivalent of main.js in js projects, which are familiar with vue.

​

Create a store state management library

If you have used Vuex, you will know that the store state management library is created in a typical project. In this case, create the store folder under SRC, and then create the index.ts file.

​

The code for the index.ts file does three things:

  1. Define state containers (repositories)
  2. Modify state in the container (repository)
  3. Use of actions in the repository

So with that in mind, let’s write code, which is a fixed format

​

After writing this code, pinia feels like a widget of Vue, which is one of pinia’s strengths.

  1. The first argument to the defineStore() method: equivalent to giving the container a name. Note: The name must be unique and cannot be repeated. This is one of the things that was specifically stated by the authorities.
  2. The second argument to the defineStore() method can be simply interpreted as a configuration object with a configuration specification for the container repository. Of course this specification is in the form of an object.
  3. State property: used to store the state of the global, here side defined, can be for the SPA global state.
  4. Getters property: used to monitor or calculate state changes, with caching capabilities.
  5. Actions property: The business logic for changing data in state varies depending on the requirements. Modify state global state data.

If you know vuex, it is easier to understand the above content. If you don’t know vuex, just remember this paragraph, and you will have a more specific and in-depth understanding in future work and study.

Define state in store

Let’s define a state in store, using HelloWord as an example

​

Read the state using store in the component

Create a hello. vue component under SRC/Components. Write the following code (all images are used for learning purposes, and there is a way to get the demo at the end of the article)

​

Once you’ve written the component, modify the app.vue file and delete the useless code, leaving only the following

​

There is a red wavy line formatting error in this code, which says

​

If you want to use VUe3-TS or better support for TS, you need to replace Vetur with volar

​

This is quite an upgraded version of Vetur, vetur habits this also support, replace the plug-in after restart everything is fine

​

Then run the project and the contents of the state we used will be displayed

​

If you’re surprised to see that you’ve used vuex, that’s it, you don’t have to write a bunch of them.

Change the state

It’s also very easy to change state in Pinia, so instead of talking about actions, let’s talk about direct actions.

Add a count under store state:

​

Then add the use of count in the Hello.vue component

​

Then, create the addButton.vue component under SRC/Components and write the following code

​

Finally introduced in app.vue

​

Back on the page, click the button to increase count

​

If you look at this, you can see how simple Pinia is for those of you who have used vuex.

Still, the way state is used above is not pretty

​

We use deconstruction to simplify, but there is a pitfall here. If the deconstruction method is directly adopted, the state will not be able to respond to changes. The code is as follows

​

Not being able to respond to changes is bad, so Pinia provides a storeToRefs method that works like this:

​

After doing so, the state reverts to the response change.

​

Getters and actions

The use of getters

The calculation attribute of Getters of Pinia and Vuex is almost the same, that is, some processing is done when obtaining the value of state. The hesitation is similar to that of Vuex, which will not be explained too much here. The only difference is that you can use this here, which is also easier to understand. Pinia is like a widget, so you should use this too.

​

The actions of the use of

Add a helloWord method to modify state in store Actions

​

Then create the modifyHello.vue component and enter the following​

Enter the content in the input box and click the button to invoke the actions method to set the value of state. The use of Actions, like state, is also called directly from the store.

END

The above is a simple introduction to Pinia, as well as simple examples, I hope to help you, welcome to pay attention to us, or join the technology group to exchange and learn front-end technology. If you want to top the demo project example, you can follow the public account, go to the wechat technology group to find the group owner to obtain.

​