Pinia的使用详细说明

为什么要使用 Pinia？

官方文档:https://pinia.web3doc.top/

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

 

怎么使用?

第一步 : 下载插件 npm i pinia@2.0.14 或者 cnpm i pinia 或者 yarn add pinia

==最新版也可以==

第二步: 改造vuex中index.js的代码;其实最后是main.js在调用者store

  /第一个阶段
  store-->index.js 文件中
  // 将之前的内容全部删除
  // 第一步引入
  import {createPinia} from "pinia"
 
 // 第二步 : 得到一个对象
   let store = createPinia()
   
   //第三步: 暴露出去
   
   export default store

/第二个阶段
 // pinia没有modules 怎么去模块化

 

 第三步:在index.js中编辑代码

 第一步: 在store文件夹中新建modules的目录 
         // 在这个目录的下边可以新建你们的模块
         // 这样就实现了模块话

  第二步: 在每一个目录下,新建一个文件.js
         一般使用index.js

  第三步:编写 index.js的代码 
      ① import { defineStore } from "pinia"
	  ② export default defineStore({
          //唯一的标识,因为暴露出去的模块很多,然后可以使用id辨别
          id:"名称",
          state(){
              return {//放的是全局的变量
                  属性名称:值,
                  属性名称2:值
              }
          },
          getters:{//计算属性
              计算属性的方法名称(){
                  
                  return 返回值
              },
              计算属性的方法名称2(){
                  return 返回值
              },
              .....
          },
          actions:{
              异步方法名称1(){
                  
              },
              异步方法名称2(){
                  
              },
              ....
          }
          
      })

完整代码:

import { defineStore } from "pinia";

export default defineStore({
  id: "userStore",
  state() {
    return {
      money: 100,
    };
  },
  getters: {
    getMoney() {
      return this.money + "3000000";
    },
    // 计算属性1() {
    //   return 返回值
    // },
    // 计算属性2() {
    //   return 返回值
    // },
  },
  actions: {
    // 异步方法1() {
    // },
  },
});

第四步:在组件里面引用

// 第三阶段
// 在组件中使用
  1) 引入我们新建的模块
     import  userStore from "@/store/modules/user/index.js"
  2)    // 引入解构的插件
   //类比 : toRefs() 将reactive中的对象或者数组解构
    import { storeToRefs } from "pinia";
  3) 将store变成一个对象,store()返回一个对象
      let store = userStore()
  
  4) 将store中的内容解构出来
     let {money,....}  =   storeToRefs(store)
     
  5) 修state中的值
     因为全局变量不能随意改动
     所以我们需要使用特殊方式
     自己组件的方法,去修改全局变量    
     function fn(){
         // $patch((参数就是state)=>{})
         store.$patch((state)=>{
             	state.money = 10000
         })
     }
   6) 如果在store 定义了getters又如何使用
      你自己定义完成
      在user-->index.js中
     import { defineStore } from "pinia"
        export default defineStore({
            //这id就是唯一的标识,因为有很多的模块,每一个模块要单独的区分
            //:key="index/id" 一样的道理
            id: "userStore",
            state() {
                return {
                    //公共的变量班费
                    money: 100,
                    userObj: {
                        name: "小何"
                    }
                }
            },
            getters: {
                // 计算属性
                getMoney() {
                    return this.money + 250
                }
            },
            actions: {
                //放异步请求

            }
        })

  7)怎么使用getters的方法
    let { 全局变量名称, getters的方法名称 ,....} = storeToRefs(store)
     let {getMoney} = storeToRefs(store)
   直接在页面上使用就行了
  8) 怎么使用actions中的方法
    页面上已经有了store
    store.actions中的异步方法的名称()

完整代码展示:

<template>
  <div>
    我是商品列表页面:
    <button>收藏</button>
  </div>
  <div>班费:{{ money }}</div>
  <button @click="fn">
    修改money的值
  </button>
  <div>getters方法的值:{{ getMoney }}</div>
</template>

<script setup>
import userStore from "../../store/modules/users/index"
import { storeToRefs } from "pinia";
let store = userStore()
let { money, getMoney } = storeToRefs(store)
function fn() {
  // 修改里面的值 直接用$patch
  store.$patch((state) => {
    state.money = 100000000
  })
}
</script>

<style lang="scss" scoped>

</style>