您现在的位置是：首页 >其他 >什么是Pinia？以及它的使用方式？以及和Vuex的区别是什么？网站首页其他

概要

提示：下边是Pinia的简单介绍（详解请点击查看官方文档进行使用）
Pinia中文文档
首先先要了解下什么是Pinia？以及它的使用和vuex相比之间有什么区别？

什么是Pinia？

Pinia其实就是Vuex5，就是Vuex第五个版本后就叫Pinia了。
Pinia是一个用于vue的状态管理库，类似于vuex，是vue的另一种状态管理工具。

Pinia和Vuex的区别？

• 与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
• Pinia是没有mutation的，它只有state，getter，action（并且action是支持异步和同步的）使用它来修改state数据。
• Pinia它默认也是存入内存中，如果需要使用本地存储，在配置上比vuex麻烦。
• Pinia不再有 modules 的嵌套结构，没有一个独立的仓库都是definStore生成出来的
• Pinia state是一个对象返回一个对象和组件的data是一样的语法。
• 没有 命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的

Pinia相比于Vuex的优势？

为什么要使用Pinia？

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

 - dev-tools 支持
 	- 跟踪动作、突变的时间线
 	- Store 出现在使用它们的组件中
 	- time travel 和 更容易的调试
 - 热模块更换
 	- 在不重新加载页面的情况下修改您的 Store
 	- 在开发时保持任何现有状态
 - 插件：使用插件扩展 Pinia 功能
 - 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
 - 服务器端渲染支持

基本实例请详细查看官网

Pinia的简单使用

安装（仅限于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')