Quickly understand the state management library Pinia and how to use it

Table of contents

1. What is pinia

2. Why use pinia

3. Advantages of pinia

4.pinia is used in the project

①Create a Vue3 project using pinia

② Use store on the page

---

1. What is pinia

Pinia originated as an experiment to explore the next iteration of Vuex. If you have learned Vue2, then you must have used Vuex. Vuex mainly plays the role of state management in Vue2 . In fact, it is a place to store data. The data stored in Vuex can be accessed by various components. It is an important part of the Vue ecosystem. In Vue3, you can use traditional Vuex to achieve state management, or you can use the latest pinia to achieve state management

Pinia is still essentially one 状态管理的库, it allows you 跨组件/页面to share state

2. Why use pinia

We mentioned above that in Vue3, you can use traditional Vuex to achieve state management, or you can use the latest pinia to achieve state management, so why learn pinia since Vue3 can still use Vuex. So pinia is definitely more convenient and simple to use than vuex

• Compared to Vuex, Pinia provides 更简单的API, 更少的规范andComposition-API风格的API
• Most importantly, Vue3 is recommended to use TS to write, TSwhen pinia is used with具有可靠的类型推断支持

3. Advantages of pinia

• mutations no longer exist, only state, gettes, actions
• Friendly TypeScript support
• There is no nested structure of modules anymore, each store is independent and does not affect each other
• no namespace module
• No need to add Stores dynamically, they are all dynamic by default
• No need to inject, import functions, call functions anymore
• Support plug-ins to extend its own functions
• Support for server-side rendering (SSR)

4.pinia is used in the project

①Create a Vue3 project using pinia

You can refer to this article:

pnpm quickly creates Vue.js projects (similar to npm) - Turbo Summer Soseki's Blog - CSDN Blog

Notice:

• Whether to add pinia when creating should choose yes
• Whether to use ts to select yes when creating

The main.ts code after creation is complete:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

Stores is our data warehouse, used to store the store we created

② Use store on the page

Take the counter.ts that comes with the store as an example

counter.ts：

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

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

  return { count, doubleCount, increment }
})

use:

• Directly quote the declared useCountersStore method on the page

/src/App.vue
<script setup lang="ts">
import { useCounterStore} from "../src/stores/counter";
const store = useCounterStore();
console.log(store);
</script>