What is Pinia

Pinia is a vUE state management solution developed by members of the Vuex team, which implements many of the Vuex 5 proposals, is more lightweight and is supported by DevTools

Vex4 has been criticized for its poor typescript support, and Vex5 has been slow to come

Hence the appearance of Pinia

Compared to VUex,

  • Pinia doesn’t need to create complex wrappers to support typescript, it has natural support for typescript type judgment, and enjoys the auto-completion that comes with ide, reducing the mental burden of development and string-oriented programming in VUE development
  • The concept of mutations is subtracted, and only the concepts of state,getters and ANCtions are retained to reduce code redundancy
  • There is no need to manually add a store. The created store is automatically added when it is used
  • Without the concept of module module, there is no need to face many modules nested under a store, and a reducer store (somewhat similar to redux/ Toolkit) can be directly imported into other stores

The Pinia document says this

Pinia tries to be as close to Vuex as possible. It was designed to test the proposal for the next iteration of Vuex and was successful as we currently have an open RFC for Vuex 5 with an API very similar to the one used by Pinia. Please note that I (Eduardo), author of Pania, am a member of the vue.js core team and have been actively involved in the design of apis such as Router and Vuex. My personal intention with this project was to redesign the experience of using the Global Store while maintaining Vue’s approachable philosophy. I made Pania’s API as close to Vuex as it moved forward so that people could easily migrate to Vuex or even merge the two projects in the future (under Vuex).

So learning Pinia now is like learning vex5 ahead of time

Pinia is easy to use

First we initialize a vite+ Vue + TS project

pnpm create vite pinia-demo -- --template vue-ts
Copy the code

Install pinia

pnpm i pinia
Copy the code

Open the project and edit the mian. Ts file in the SRC directory to introduce Pinia

// main.ts
​
import { createApp } from 'vue'
import App from './App.vue'
​
import { createPinia } from 'pinia'
​
createApp(App).use(createPinia()).mount('#app')
Copy the code

Create a store folder in the SRC directory to store state management, and create a counter. Ts folder. Let’s do a simple counter state application

import { defineStore } from 'pinia'
​
export const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})
Copy the code

Pinia creates a store through the defineStore function, which receives an ID to identify the store, along with the Store option

We can also use a callback function to return options. The internal callback function is written like vue setup(). For example, the above definition can be written as

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function doubleCount() {
    return count.value * 2
  }
  function increment() {
    count.value++
  }
​
  return { count, increment }
})
Copy the code

Then we use store in app.vue

<script setup lang="ts">
import { useCounterStore } from './store/counter'
const useCounter = useCounterStore()
</script>
​
<template>
  <h2>{{ useCounter }}</h2>
  <h2>{{ useCounter.count }}</h2>
  <h2>{{ useCounter.doubleCount() }}</h2>
  <button @click="useCounter.increment">increment</button>
</template>
​
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

In the process of using Pinia, it can be found that auto-completion is quite excellent

The browser runs like this

Open developer Tools to view vue DevTool

Vue DevTool supports add, delete, change and check Pinia status!

Pinia can modify state in a variety of ways

  • Use actions, as shown above

  • Modify directly in the state

    const countPlus_1 = useCounter.count++
Copy the code

  • The $patch function of the store supports both options and callback functions. The callback function is suitable for array or other states that need to be modified by calling the state method

    const countPlus_2 = useCounter.$patch({ count: useCounter.count + 1 })
Copy the code
    const countPlus_3 = useCounter.$patch((state) => state.count++)
Copy the code

The StoreToRefs function is required for the structure of the state

const { count } = storeToRefs(useCounter)
Copy the code

Experience with

Pinia is very friendly to learn and use. It is easy to use Pinia after reading the official documents. Compared with VUEX, Pinia is faster and has excellent coding experience.

State management for small projects is more focused on convenience and efficiency (even unnecessary), so vuex is a bit more complicated. For example, when Vue3 came out of beta, it was said that composite apis can be used, such as provide and inject to replace VUex. So Pinia, a lightweight state management solution, is quite timely.