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 中文文档

Logo

前往低代码交流专区

更多推荐