pinia的基本使用。

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：

• Devtools 支持
  • 追踪 actions、mutations 的时间线
  • 在组件中展示它们所用到的 Store
  • 让调试更容易的 Time travel
• 热更新
  • 不必重载页面即可修改 Store
  • 开发时可保持当前的 State
• 插件：可通过插件扩展 Pinia 功能
• 为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
• 支持服务端渲染

简单介绍以下使用流程：

1、下载包pimia 可以使用npm、cnpm、yarn等包管理工具

npm i pinia

2、需要在vue的入口文件main.js文件引入pinia(需要使用app引用我们的插件)

import { createPinia } from 'pinia'
const pinia = createPinia()

const app = createApp(App)

app.use(pinia)

3、直接在src目录下创建个文件，名称自起，创建一个js文件。

创建集中管理工具需要通过pinia的一个属性，defineStore来创建

import { defineStore } from 'pinia'

const userStore = defineStore('user', {
    state: () => {
        return {
            count: 1,
            paw2: 1,
            paw3: 1
        }
    },
    getters: {
        doubleCount: (state) => state.count * 2,
        handleDoubleCount() {
            return this.doubleCount + 1
        }
    },
    actions: {
        inc() {
            this.count++
        },
        randomNum() {
            this.count = Math.random(100 + Math.random()).toFixed(2)
        }
    }
})
export default userStore;

pinia只有三大属性，state、getters、actions

三者使用与vuex使用相似，但是pinia使用起来更加简单方便，通过官网很容易学习

state使用：

在渲染页面我们通过引入我们pinia定义的store文件，并且引入pinia中的storeToRefs可以将我们store中的数据展开以供我们使用。相当于我们可以通过storeToRefs解构赋值我们store中的数据以及方法。

<script setup>
import userStore from '../storage/pinia'
import { storeToRefs } from 'pinia'
const store = userStore()
// console.log(store, 'store');
const data = storeToRefs(store)
console.log(data);
const handleCount = () => {
    store.$patch({
        count: store.count + 1,
        paw2: Math.pow(store.count + 1, 2),
        paw3: Math.pow(store.count + 1, 3)
    })
}
</script>

<template>
    <div>
        数值：{{ data.count }},双倍数值：{{ data.doubleCount }},双倍数值+1：{{ data.handleDoubleCount }},平方：{{ data.paw2 }}三次方：{{
            data.paw3 }}
        <button @click="store.count--">-</button>
        <button @click="handleCount">+</button>
        <button @click="store.$reset()">重置</button>
        <button @click="store.randomNum()">随机数</button>
    </div>
</template>

页面数据直接可以通过属性渲染，并且pinia可以直接通过获取到的属性值进行修改数值等操作。

并且通过引入的store文件中的属性$patch可以修改属性的值，$reset可以重置回最初的值。

actions可以直接通过获取方法直接使用

getters计算属性，可以使用已定义的计算属性，获取上个计算属性的值进行改变值重新赋值使用。

使用起来方便快捷，十分简单

直接通过我们storeToRefs接受的值直接将我们getters上的数据渲染在页面上。