Pinia在Vue3里的使用(简洁版）

Pinia概念详解与使用： 一文搞懂pinia状态管理（保姆级教程）

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态

Pinia与Vuex的区别

1. 支持选项式 api 和组合式 api 写法
2. pinia 没有 mutations，只有：state、getters、actions
3. pinia 分模块不需要 modules（之前 vuex 分模块需要 modules）
4. TypeScript 支持很好
5. 自动化代码拆分
6. pinia 体积更小（性能更好）

应用流程

1 安装

// 使用 npm 安装
npm install pinia
// 使用 yarn 安装
yarn add pinia
// 使用 pnpm 安装
pnpm add pinia

2 创建Pinia并全局注册

使用脚手架创建项目时有安装 Pinia，可跳过此步

src/stores/index.js

import {
    createPinia } from "pinia";

const pinia = createPinia()

export default pinia

main.js

import {
    createApp } from 'vue'
import App from './App.vue'
import pinia  from './stores'

const app = createApp(App)
app.use(pinia) //注册全局pinia

app.mount('#app')

3 创建store

使用pinia提供的 defineStore() 方法来创建一个store，该store用来存放我们需要全局使用的数据。
src/stores/modules/user.js

import {
    defineStore } from 'pinia'

// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
   
      state: () => {
   
          return {
   
          counter: 0,
          }
      },
      getters:{
   },
      actions:{
   }
    
})

创建store很简单，调用 pinia 中的 defineStore 函数即可，该函数接收两个参数：

• name：一个字符串，必传项，该store的唯一id。
• options：一个对象，store的配置项，比如配置store内的数据，修改数据的方法等等。

我们可以定义任意数量的store，因为我们其实一个store就是一个函数，这也是pinia的好处之一，让我们的代码扁平化了，这和Vue3的实现思想是一样的。

4 使用store

app.vue

<script setup >
import {
    useUsersStore } from "../src/stores/modules/user";
const store = useUsersStore();
console.log(store);
</script>

5 state

5.1 Pinia定义state数据

import {
    defineStore } from 'pinia'