什么是pinia

文档

Pinia 🍍

Pinia 是 Vue 的专属状态管理库，可以实现跨组件或页面共享状态，是 vuex 状态管理工具的替代品，和 Vuex相比，具备以下优势

1. 提供更加简单的API （去掉了 mutation ）
2. 提供符合组合式API风格的API （和 Vue3 新语法统一）
3. 去掉了modules的概念，每一个store都是一个独立的模块
4. 搭配 TypeScript 一起使用提供可靠的类型推断

创建空Vue项目并安装Pinia

1. 创建空Vue项目

npm init vue@latest

2. 安装Pinia并注册

npm i pinia

注册pinna

import { createPinia } from 'pinia'

const app = createApp(App)
// 以插件的形式注册
app.use(createPinia())
app.mount('#app')

3. 使用counter

1- 定义store

import { defineStore } from "pinia";
import { ref } from "vue";

export const useCounterStore = defineStore('counter', ()=> {
    // 数据 state
    const count = ref(0)

    // 修改数据的方法 action
    const increment = ()=> {
        count.value++;
    }
    return {
        count,
        increment
    }
})

2- 组件使用store

<script setup>
  // 1. 导入use方法
    import { useCounterStore } from '@/stores/counter'
  // 2. 执行方法得到store store里有数据和方法
  const counterStore = useCounterStore()
</script>

<template>
    <button @click="counterStore.increment">
    {{ counterStore.count }}
  </button>
</template>