Get to know Vue's new generation state management library--Pinia

What is pinia? how to use? This article will take you to learn about Vue's new generation of state management library - Pinia. I hope it will be helpful to you!

What is Pinia

Pinia (pineapple in Spanish) is essentially still a state management Library, used for state sharing across components and pages. [Related recommendations: vue.js video tutorial]

The difference between pinia and vuex:

• More friendly TypeScript support, Vuex previously supported TS The support is very unfriendly

• Compared with Vuex, Pinia provides a simpler API with fewer rituals and provides a Composition-API style API

• There is no more nested structure of modules

• There is no longer the concept of namespace, and there is no need to remember their complex relationships.

How to use Pinia

1. Install pinia

yarn add pinia

2. Create a pinia

// src/stores/index.js
import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

//main.js
import pinia from './stores'

app.use(pinia)

Understanding Store

A Store (such as Pinia) is an entity that holds the state and business logic that are bound to your component tree, that is, saved With the global state

, you can define any number of Stores to manage your state, includingstate, getters, actions

1. Define a store

• Store is defined using defineStore(),

• and it requires a unique name, as The first parameter is passed

2. Use store

Operation State

state is the core part of the store, and the store is used to implement our state management.

• Method 1: Modify state one by one directly
• Method 2: Modify multiple states at once
• Method 3: Replace state
• Method 4: Reset state

##Getters

1 . Understand and define Getters

Getters is equivalent to the calculated properties of Store:

can be defined using the getters attribute in defineStore();
• Getters can define a function that accepts a state as a parameter;

2. Access Getters

• Method 1: Access the Getters of the current store

• Method 2: Access other Getters of your own in Getters

• Method 3: Access Getters of other stores

getters: {
    // 1. 基本使用
    debouleCount(state) {
      return state.count * 2
    },
    // 2. 一个 getters 引入另外一个 getters
    useDebouleCount() {
      return this.debouleCount + 2
    },
    // 3. getter也支持返回一个函数
    getFriendById(state) {
      return function (id) {
        for (let i = 0; i <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/9b758e20089c830456d8b17003d54ea1-8.png?x-oss-process=image/resize,p_40" class="lazy" alt="Get to know Vues new generation state management library--Pinia"></p><h2>Understand and define Action<strong></strong>
</h2><blockquote>Action can be understood as methods in the component. Like getters, all operations of the entire store instance can be accessed through this in the action. <p></p>
</blockquote><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/4cc76dfa4ba802a30963e696c1128d1f-9.png?x-oss-process=image/resize,p_40" class="lazy" alt="Get to know Vues new generation state management library--Pinia"></p><blockquote>Action supports asynchronous operations, so you can use await. <p></p>
</blockquote><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/4cc76dfa4ba802a30963e696c1128d1f-10.png?x-oss-process=image/resize,p_40" class="lazy" alt="Get to know Vues new generation state management library--Pinia"></p>For more programming-related knowledge, please visit: <p>Introduction to Programming<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程入门">! ! </a></p>

The above is the detailed content of Get to know Vue's new generation state management library--Pinia. For more information, please follow other related articles on the PHP Chinese website!