vue3.0——数据仓库Pinia介绍、使用pinia、修改状态、订阅修改、getter、action、模块化

一、Pinia介绍

pinia是什么？

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

与vuex相比

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

• 可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pinia。
• 抛弃了Mutations的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。
• 不需要modules嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
• 完整的TypeScript支持。Vue3版本的一大优势就是对TypeScript的支持，所以Pinia也做到了完整的支持。Vuex对TS的语法支持不是完整的。
• 代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Composition api完美了解决这个问题。 可以实现代码自动分割，pinia也同样继承了这个优点。

为什么要使用 Pinia:

Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。

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

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

二、使用Pinia

引入pinia

  在main.js中：

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index.js"
import { createPinia } from 'pinia'

let app=createApp(App)

app.use(createPinia())
app.use(router)
app.mount('#app')

示例：

  在src目录下新建store文件夹
  新建仓库hive.js文件
  定义store（仓库）
  import { defineStore } from 'pinia'

import { defineStore } from 'pinia'
//传入两个参数  第一个参数是id 可以在devtool中通过id来查看
//第二个是配置项 state 为数据 getter类似计算属性 action 修改数据的方法 支持同步异步
export const useHive = defineStore('hive', {
       state: () =>{
          return  {msg:"hive仓库的数据"}
       }
       //类似于computed 可以帮我们去修饰我们的值
       getters:{
 
       },
       //可以操作异步 和 同步提交state
       actions:{
 
       }
})
//按需导出useHive 引入时与此同名且写在{}里面

组件中使用：

<script setup>
   import { useHive } from