Vue state management tool

1. Introduction and five advantages of Pinia

Pinia is a lightweight state management library for Vue.js, official website: https://pinia.vuejs.org.

Pinia is a replacement for Vuex in the vue ecosystem, a brand new vue state management library. After Vue3 became the official version, the project strongly recommended by You Yuxi is Pinia.
Let's first take a look at what Pinia is better than Vuex, that is, the five major advantages of Pinia.

It can support Vue2 and Vue3 very well, that is, old projects can also use Pinia.
Abandon the operation of Mutations, only state, getters and actions. It greatly simplifies the use of state management libraries, making code writing easier and more intuitive.
There is no need for nested modules, and it complies with Vue3's Composition api to make the code more flat.
Full TypeScript support. A major advantage of the Vue3 version is the support for TypeScript, so Pinia has also achieved complete support. If you are familiar with Vuex, you must know that Vuex's syntax support for TS is not complete (it is often complained about).
The code is more concise and can achieve good automatic code segmentation. In the era of Vue2, writing code requires scrolling back and forth on the screen to find variables, which is very troublesome. The Composition API of Vue3 perfectly solves this problem. Automatic code segmentation can be realized, and pinia also inherits this advantage.

2. Installation of Pinia development environment

Pinia installation instructions: npm i pinia

If the Vue project created through the following steps has already installed pinia by default:

 1、执行命令 npx nrm use taobao  (npm的镜像服务器切换到国内的淘宝镜像，一台电脑执行一次即可)
 2、npx create-vue vue-test 创建vue-test项目
 3、cd vue-test  进入vue-test项目
 4、npm i 安装依赖包
 5、npm run dev 打开项目

If the created vue project does not have pinia, then install it through the instructions to install pinia.

3. Create a store file in the Pinia way

1. Introduce and mount Pinia in the main.js file

import { createPinia } from 'pinia'

After the introduction, use the createPinia( ) method to get an instance of pinia, and then mount Pinia to the Vue root instance.

//注册Pinia插件
app.use(createPinia())

2. Create a store state management library

Create a new store folder directly under the /src directory. After you have the folder, create the relevant store file.

The code in this file generally only does the following things:

Define state container (repository)

Modify the state (state data) in the container (warehouse)

The use of actions in the warehouse (modification status: including synchronous and asynchronous, no mutations in pinia)

getters: similar to computed properties

Step 1: Define the state container (repository)

 import {defineStore} from "pinia";
 export const useTodoStore=defineStore({
 	id:"todo",//id
 	state:()=>({//状态数据
 		
 	}),
 	getters:{//计算属性
 		
 	},
 	actions:{//方法
 		
 	}
 });

This code is very similar to a vue widget, which is also the advantage of Pinia.

id attribute : Each store file has a unique id attribute.

state attribute: used to store the global state, defined here can be the global state in the SPA, which can be read by each page and component through the Pinia method.

Getters attribute: used to monitor or calculate state changes, and has a cache function.

Actions attribute: For the business logic of data changes in the state, the requirements are different, and the writing logic is different. To put it bluntly, it is to modify the state global state data.

Step 2: After the store file is created, you can write the state data, gettres attribute, and actions attribute that need to be used in it.

3. Read store data in the vue component

Create a new .vue file in the /src/components folder. The steps are as follows:

Step 1: Introduce the store file in <script setup></script>:

import {useTodoStore} from "@/stores/todo.js";

In order to realize two-way binding of data, the state deconstructed by store needs to be modified by storeToRefs(), so storeToRefs must be introduced: import {storeToRefs} from "pinia";

Step 2: Instantiate the store: const store=useTodoStore();

third step:

Get state or getters:

const{filterList,filter}=storeToRefs(store);

After obtaining the state, it can be used directly in the component

Get actions:

const {deleteTodoList}=store;

The method can be obtained directly without modification.

If there are custom variables in the page, they need to be modified into two-way binding variables through ref modification. At this time, ref needs to be introduced as follows:

Introduction: import {ref} from 'vue';

Use: const msg=ref("");//custom variable

        const changeTitle=(item)=>{//Realize two-way binding of data by modifying the value of the custom variable
       item.title=msg.value;
       item.edit=false;
       msg.value="";
   }

4. Data Persistence

Installing the pinia-plugin-persistedstate plug-in can assist in realizing the data persistence function.

1. Installation instruction: npm i pinia-plugin-persistedstate

2. use

Introduced in main.js: import persistedState from "pinia-plugin-persistedstate"

3. Open persist in the corresponding store file

persist: true,//Enable data caching and write in parallel with the state method

The data is stored in sessionStorage by default, and the id of the store will be used as the key.