What is Pinia?

Pinia is a state management library for Vue. Similar to Vuex, Pinia is another state management solution for Vue. Pinia supports Vue2 and Vue3

This article only covers the use of Pinia in Vue3, with a slight difference in Vue2. Please refer to the official documentation

Pinia advantage

Intuitive, easy to learn extremely light, only 1 KB modular design, easy to split state

Install Pinia

Installation requires @next because Pinia 2 is in beta and Pinia 2 is the version corresponding to Vue3

# NPM NPM install pinia@next # yarn add pinia@nextCopy the code

Create a pinia (root storage) and pass it to the application:

import { createPinia } from 'pinia';

app.use(createPinia());
Copy the code

Core concepts and basic usage

Store

Store is an entity that holds state and business logic, which can be read and written freely, and used to create a Store in setup after import

// store.js
import { defineStore } from "pinia";

// defineStore returns a function called to get the Store entity
export const useStore = defineStore({
  // id: required, unique in all stores
  id: "myGlobalState".// state: a function that returns an object
  state: () = > ({
    count: 1})});Copy the code

The use of the Store

// XXX. Vue <template> <div> {{store.count}} </div> </template> <script> Use your own path import {useStore} from "@/store/store.js"; Export default {setup() {// Call the function to get Store const Store = useStore(); return { store } } } </script>Copy the code

Getters

Getters in Pinia have the same function as Getters in Vuex, but use a slightly different function. Getters in Pinia read directly from Store, like store. xx, just like normal attribute reads

Basic Use of Getters

The first parameter to the Getter is state, which is the current state. You can also use this.xx to get the state. You can access other getters in the Getter, or other stores

Example:

/ / modify store. Js
import { defineStore } from "pinia";

import { otherState } from "@/store/otherState.js";

export const useStore = defineStore({
  id: "myGlobalState".state: () = > ({
    count: 2
  }),
  getters: {
    // A basic Getter: calculates the square of count
    // Use parameters
    countPow2(state) {
      return state.count ** 2;
    },
    / / use this
    /* countPow2() { return this.count ** 2; }, * /
    // Simple getters use the arrow function directly
    // countPow2: state=> state.count ** 2

    // Get other getters, directly through this
    countPow2Getter() {
      return this.countPow2;
    }

    // Use other stores
    otherStoreCount(state) {
      // Here are other stores, called to get Store, just like in setup
      const otherStore = useOtherStore();
      returnstate.count; }}});// otherState.js
import { defineStore } from "pinia";

export const useStore = defineStore({
  id: "otherState".state: () = > ({
    count: 5})});Copy the code

actions

Pinia has no Mutations, so state is unified in actions. Although Store can be directly accessed through this.xx, it is still recommended to operate in actions. Action can access other stores like getters. Use other stores in the same way as a function. For details, refer to Actions

Action Basic usage

// store.js
export const useStore({
  state: () = > ({
    count: 2.// ...
  })
  // ...
  actinos: {
    countPlusOne() {
      this.count++;
    },
    countPlus(num) {
      this.count += num; }}})Copy the code

conclusion

Pinia is much simpler than Vuex, and Pinia can freely extend official documents. Plugins Pinia is an intuitive way to manage state, allowing users to return to the original state of module import and export. Pinia has a similar feel to Recoil, but with fewer concepts and apis. Pinia is very streamlined and easy to use. Pinia 2 is currently in Beta and is not recommended for production, but will become another state management solution in the Vue ecosystem once it stabilises