vue全局状态管理工具 Pinia 的使用

news2024/11/18 17:43:19

先了解一下关于Pinia的一些故事，面试把这些讲给面试官挺加分的，同时这是我持续学习下去的动力

1.为什么叫Pinia？

官网解释是西班牙语中的 pineapple，即“菠萝”，菠萝花是一组各自独立的花朵，它们结合在一起，形成一个多重的水果。与 Store 类似，每一个都是独立诞生的，最终它们都是相互联系的。它(菠萝)也是一种原产于南美洲的美味热带水果。

2.Pinia有什么作用？

与vuex的作用一样，用于全局共享数据。其实Pinia就是起源于vuex的一次更新，Pinia 于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式api的 vue 状态管理库，就是说在vuex中可以写vue3的代码。结合了 vuex 5的大部分功能，所以决定将其作为新的推荐方案来代替 vuex。也就是可以说Pinia就是vuex5版本。

3.安装，在项目的终端输入：

npm install pinia

4.main.js配置

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

5.stores仓库，在src目录下创建stores文件夹，里面存放对仓库的管理操作

6.counter.js仓库，因为我实现的这个功能是让数字加，所以就命名了counter：

//这里就使用vue3的写法，虽然pinia也可以像写vuex一样写state、actions、mutations等等，但pinia主要还是面向vue3

import { defineStore } from 'pinia' //引入
import { ref, reactive } from "vue" //引入组合式api
import { useRouter } from "vue-router"

//可以对 `defineStore()` 的返回值进行任意命名，但最好使用 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
//defineStore()的第一个参数一定要是项目中唯一的名称
export const useCounter = defineStore('counter', () => {
    let num = ref(0) //这个num就是此仓库中的响应式数据

    const addNum = () =>{ //addNum就是此仓库的方法
        num.value = num.value+1;
    }

    return { num,addNum } //一定要return！不然其他地方用不到
})

7.在about页面使用counter仓库：

<script setup>
import {useCounter} from "@/stores/counter.js" //引入useCounter仓库
//接收return的返回值，里面就包含num变量和addNum方法，num展示到页面，点击按钮调用addNum方法
const store = useCounter();    
</script>

<template>
  <div class="about">
    <h1>{{store.num}}</h1>
    <button @click="store.addNum">num++</button>
  </div>
</template>

<style>
</style>

8.效果：点击按钮页面数字会跟着变化，成功