Pina知识

Pina

1. 使用vite创建项目

 yarn create vite

2. 安装pina

 yarn add pinia@2.0.11

3. 在main.js中引入pina

 import { createApp } from 'vue'
 import App from './App.vue'
 import { createPinia } from "pinia";
 ​
 const pina = createPinia()
 const app = createApp(App)
 ​
 //将pina挂载到vue实例上面
 app.use(pina)
 ​
 app.mount('#app')

4. 创建store文件夹index.ts文件

 import {defineStore} from "pinia";
 import {Actionmain} from "./Home/home";
 export const mainState = defineStore("main",{
     state:()=>{
         return{
             helloWorld:"helloword",
             testNumber:1,
             phone:15548797513
         }
     },
     actions:{
         changeNumber(){
             this.testNumber += 999
             this.helloWorld = "action修改数据"
         },
         getList(){
             console.log("home中的数据被调用了",Actionmain().list)
         }
     },
     getters:{
         // getter中计算的数据是有缓存的不管数据有几个且只执行一次
         phoneHidden():String{
             console.log("Getter被调用了")
             return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
         }
     }
 })
 ​
 ​

5. 修改sotre的四种方式

5.1 第一种直接修改数据

 const test = ()=>{
   store.testNumber+=10
 }

5.2 第二种使用store中的$patch对象形式

 const test1 = ()=>{
   store.$patch({
     helloWorld: store.helloWorld ==="helloword"?"张腾飞":"helloword",
     testNumber: store.testNumber += 90
   })
 }

5.3 第三种使用store中的$patch函数形式

 const test2 = ()=>{
   store.$patch((store)=>{
     store.helloWorld  = "6666"
       store.testNumber += 100
   })
 }

5.4 第三种使用pina中的attions修改store

 //index.ts文件
 import {defineStore} from "pinia";
 import {Actionmain} from "./Home/home";
 export const mainState = defineStore("main",{
     state:()=>{
         return{
             helloWorld:"helloword",
             testNumber:1,
             phone:15548797513
         }
     },
     actions:{
         changeNumber(){
             this.testNumber += 999
             this.helloWorld = "action修改数据"
         },
         getList(){
             console.log("home中的数据被调用了",Actionmain().list)
         }
     },
     getters:{
         // getter中计算的数据是有缓存的不管数据有几个且只执行一次
         phoneHidden():String{
             console.log("Getter被调用了")
             return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
         }
     }
 })
 ​
 const test3 = ()=>{
   alert("123")
   store.changeNumber()
 }

6. 结构解构赋值必须使用pina中的storeToRefs（小技巧）

<template>
  <div>{{store.helloWorld}}</div>
  <div>{{store.testNumber}}</div>
  <div>{{store.phoneHidden}}</div>
  <br>
  <div>{{store.helloWorld}}</div>
  <div>{{store.testNumber}}</div>
  <div>{{store.phoneHidden}}</div>
</template>

<script setup lang="ts">

import {mainState} from "../store";
import {storeToRefs} from "pinia";
const store = mainState()

// 如果想解构赋值必须使用pina中的storeToRefs
const {helloWorld,testNumber} = storeToRefs(store)
</script>

7. store中getter计算属性的使用

// 计算store的phone隐藏中间4位
getters:{
        // getter中计算的数据是有缓存的不管数据有几个且只执行一次
        phoneHidden():String{
            console.log("Getter被调用了")
            return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
        }
  }

8. pina中store的相互调用

// 在store文件夹下创建home文件index
import {defineStore} from "pinia";

// Actionmain仓库的名字，action为仓库的id相当仓库的唯一标识
export const Actionmain = defineStore("action",{
    state:()=>{
        return{
            list:['张腾飞','王乐明','越星']
        }
    }
})


// 在store下的index文件引入home文件的index
import {defineStore} from "pinia";
import {Actionmain} from "./Home/home";
export const mainState = defineStore("main",{
    state:()=>{
        return{
            helloWorld:"helloword",
            testNumber:1,
            phone:15548797513
        }
    },
    actions:{
        changeNumber(){
            this.testNumber += 999
            this.helloWorld = "action修改数据"
        },
        getList(){
            console.log("home中的数据被调用了",Actionmain().list)
        }
    },
    getters:{
        // getter中计算的数据是有缓存的不管数据有几个且只执行一次
        phoneHidden():String{
            console.log("Getter被调用了")
            return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
        }
    }
})