千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

关于pinia

Pinia是Vue.js的状态管理库。 与Vuex相比，Pinia更加轻量级且易于使用。Pinia支持模块化的状态管理，允许开发者将store仓库划分为多个模块, 每个开发者可以单独维护自己的模块，这种模块化的状态管理使得开发大型应用程序更加方便和可维护

pinia使用 :

一：在项目入口文件：

  第一步： 下载pinia npm i pinia

  第二步： 在项目入口文件从pinia导入createStore方法  

          import { createStore } from 'pinia'

  第三步： 调用这个方法获得实例 let pinia = createStore()

  第四步： 项目入口文件使用pinia注册pinia插件 app.use(createPinia())

  

二：创建仓库：

  2.1：option Store:

   1：创建store文件夹，创建mystore文件

    导入 import { defineStore } from 'pinia'

     //第一个参数mystore是唯一值 不可与其他store名字冲突

    let usemystore = defineStore('mystore',{

    })

    actions 可以是同步的或异步的,默认情况下，Pinia 的 actions 是同步的。

    处理异步操作可以在 action 内使用 async/await、Promises 或其他异步处理方法

    计算属性getter 直接store.方法名 进行调用

 2.2：setup Store:

        第二个参数传递回调函数

        回调函数内

            ref 定义的就是状态  ------- 类似于 vuex4.0 中的 state

            直接定义一个函数 用于修改状态 ----- 类似于 vuex4.0 中的 actions

            计算属性 从vue导入computed属性来创建一个计算属性 omputed(()=>{})

            最后将状态 和函数 return 出去即可使用

        其他没有区别

 三： 修改pinia里的state：

   1：直接修改状态： Store 中的 state 是响应式的 

       所以可以直接访问和修改 store.变量=新的值

       直接修改状态可能会破坏单向数据流和追踪状态变化的能力，

       因此不推荐在大型应用中频繁使用。

   2： 放在方法中 可以使用补丁patch

    把这个对象合并到state里的对象同名进行覆盖完成修改

    store.$patch({

     str:''

    })

   3： 重置 state里的值

    store.$reset({

     str:''

    })

   4：使用 Actions

    store.函数名 传入实参进行修改