记录使用pinia

在electron vite vue elementplus ts 的基础上使用pinia

---

---

提示：以下是个人理解,记录，仅供参考

一、什么是pinia？

1.Pinia概述

Pinia开始于大概2019年，最初作为一个实验为Vue重新设计状态管理，让它用起来像组合API。

Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）。

Pinia（发音为/piːnjʌ/，如英语中的peenya）是最接近piña（西班牙语中的菠萝）的词。

这可能也是Pinia的图标是一个菠萝的原因。
二、Pinia和Vuex的区别

Pinia最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。

最终，团队意识到Pinia已经实现了Vuex5中大部分内容，所以最终决定用Pinia来替代Vuex。

和Vuex相比，Pinia有很多的优势：

mutations不再存在

更友好的TypeScript支持，Vuex之前对TS的支持很不友好

不再有modules的嵌套结构，可以灵活使用每一个store，它们是通过扁平化的方式来相互使用的

不再有命名空间的概念，不需要记住它们的复杂关系

二、使用步骤

1.引入库

代码如下（示例）：

npm install pinia
添加成功后可在package.json依赖中查看到已经添加到依赖了

2.配置

代码如下（示例）：

在main.ts函数入口中插入一下代码
import {createPinia} from 'pinia'
const store=createPinia()
createApp(App).use(store).mount('#app')

3.创建store

在src下新建一个目录store,再新建一个index.ts文件插入一下代码

import {defineStore} from 'pinia'
export const setting_info=defineStore('setting_info',{ //setting_info是唯一值,相当于命名空间
    state:()=>{
        return{
        //全局变量
            noTip:false,
            shut:true,
            min:false
        }
    },
    getters:{
    //computed
    },
    actions:{
    //全局函数
    }
})

4.引用

  import {login_info} from '../store'
  const lginfo=login_info()

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。