pinia是什么及它的使用

pinia是什么？

pinia是一个用于vue的状态管理库，类似于vuex,是vue的另一种状态管理工具

与vuex相比

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

• mutations 不再存在。
• 无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
• 不再需要注入、导入函数、调用函数、享受自动完成功能！
• 无需动态添加 Store，默认情况下它们都是动态的
• 不再有 modules 的嵌套结构

安装（仅限于vue3）

• 通过你喜欢的包管理器安装

npm install pinia

或

yarn add pinia

使用

1. 在src目录下新建一个stroe文件夹，在文件夹中新建一个index.ts
2. 通过import将下载好的pinia引入到index.ts中并导出

   import { createPinia, defineStore } from 'pinia'
   
   export const Pinia = createPinia()
   
   export default defineStore('admin', {
   //这里的state与vue2中用来存放初始化变量的data的写法相似，需要return
    state: () => {
           return {
               count: 100,
   
           }
       },
   
    getters: {
           count: state => state.count
         },
   //Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑：
     actions: {
          
           }
          
       },
   
   })

3.在main.js中进行注册

import { createApp } from 'vue'
import App from './App.vue'
import { Pinia } from './store/index'



const app = createApp(App)


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

（注：要想了解更多请看官网：介绍 | Pinia 中文文档）