What is Pinia?

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

This article only covers the use of Pinia in VUE3, and uses it slightly differently in VUE2, for reference
The official documentation

Pinia advantage

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

Install Pinia

The installation requires @next because Pinia 2 is in beta, and Pinia 2 is a version of Vue3

# NPM NPM install pinia@next # yarn yarn add file

Create a Pinia (root store) and pass it to the application:

import { createPinia } from 'pinia';

app.use(createPinia());

Core concepts and basic uses

Store

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

// store.js import { createStore } from "pinia"; Export const useStore = creteStore(const useStore = creteStore(const useStore = creteStore(const useStore = creteStore)); "MyGlobalState", / / state: return the object function of the state: (a) = > ({count: 1})});

The use of the Store

// xxx.vue <template> <div> {{store. Count}} </div> </template> <script> // import store, Import {useStore} from "@/store/store.js"; import {useStore} from "@store /store.js"; Export default {setup() {Store const Store = useStore(); return { store } } } </script>

Getters

The Getters in Pinia act the same way as the Getters in Vuex, but with a slight difference read directly on the Store in the form of Store.xx, just like a normal attribute read

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 also access other getters, or other stores, in the Getter


Example: 

// modify store.js import {createStore} from "pinia"; import { otherState } from "@/store/otherState.js"; export const useStore = creteStore({ id: "myGlobalState", state: ()=> ({ count: 2 }), getters: {// A basic Getter: CountPow2 (state) {return state. Count ** 2; }, // use this /* countPow2() {return this.count ** 2; }, */ // simple Getter directly uses arrow function // countPow2: State => state. Count ** 2 // Get the other getters by this countPow2Getter() {return this.countPow2; } // use the otherStore otherStorecount (state) {// here's the otherStore, call get Store, just like in setup const otherStore = useotherStore (); return state.count; }}}); // otherState.js import { createStore } from "pinia"; export const useStore = creteStore({ id: "otherState", state: ()=> ({ count: 5 }), });

actions

Pinia has no Mutations, and state is always operated in actions. Access to the corresponding state via this.xx is recommended in actions, although Store can be operated directly. Actions can also access other stores like getters and use other stores in the same way as above. We won’t go into the Actions documentation for details here

Action Basic Use

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

conclusion

Pinia is much simpler than Vuex, and can be easily extended to Plugins. Pinia is an intuitive way to manage state, returning users to the original state where modules were imported and exported. Pinia feels a lot like Rerecoil, but with fewer concepts and APIs. Rerecoil is very simple and easy to get started with. Pinia 2 is currently in Beta and is not recommended for use in a production environment, but when stabilized it will become another major state management solution in the Vue ecosystem