Pinia

Pinia的开始

​ 安装

npm install pinia

​ Main.ts中的基本配置

import { createPinia } from 'pinia'
const pinia = createPinia();
const app = createApp(App);
app.use(pinia)   //只能说顺序很重要
app.mount('#app')

Store的配置

// 定义状态容器 state
// 修改容器 gettes
//仓库中的数据派发actions

import {defineStore} from 'pinia' //引入一个定义仓库
export const mainStore = defineStore('main',{
        // defineStore接受2个参数，一个是字符串参数 一个是配置对象
        // 它所接收的字符串参数相当于是命名空间
        state:()=> {
            return {
                hellworld :'Hello World'
            }
        },

        getters:{}, //相当于计算属性用来监听state的变化

        actions:{} //派发请求
})

Pinia的使用

一、通过引用仓库即可传递数据

<template>
    <div>{{store.hellworld}}</div>
</template>
<script setup lang="ts">
    import {mainStore} from '../store/index'
    const store = mainStore();

</script>

二、storeToRefs的使用

有的时候store所提供的数据会出现丢失响应式的问题，这个时候就可以使用storeToRefs去解决这个问题

<template>
    <div>{{store.hellworld}}</div>
    <div>{{store.count}}</div>
    <hr/>
    <!-- 通过结构的方式来把数据写在模板上 -->
    <!-- 如果是这样子去写的话就会丢失数据响应 -->
    <div>{{hellworld}}</div>
    <div>{{count}}</div>
    <!-- 这个时候可以通过storeToRefs -->

</template>
<script setup lang="ts">
    import {mainStore} from '../store/index'
    import {storeToRefs} from 'pinia'

    const store = mainStore();
    const {hellworld,count} = storeToRefs(store)
    // 通过这种方式可以解决数据丢失响应式的问题
</script>

三、Pinia修改状态数据的方式

  // 第一种基本方法
    const change=()=>{
        store.count++
    };

    // 第二种方式 $patch
    // $patch适用于修改多个数据状态使用/单个也没问题
    const jian=()=>{
        store.$patch({
            count:store.count -1
        })
    };

    // 第三种方式 通过$patch传递函数
    const chen=()=>{
        store.$patch((state)=>{
            state.count +2
        })
    }
    // 第四种方式 直接把业务逻辑写到actions里面

四、Gettes的用法

//让号码的中间四位隐藏
state:()=> {
       return {
         phone:13535612551}},
        getters:{
            phoneHidden(state){
            //定义一个方式
            console.log('Getters被调用');
        	return state.phone.toString().replace(/^(\d{3})\d{4}						(\d{4})$/,'$1****$2')
            }
        }
        
   //然后去对这个方法进行一个调用
       <div>{{store.phoneHidden}}</div> //就能得到结果

五、Pinia中store的互相调用

store/two.ts
	import {defineStore} from 'pinia'
	export const twoStore = defineStore({
    state:()=>{
        return{
            list:[1,2,3,4,5]
        }
    }
})

store/index.ts
import {two} from './two' //引入另一个数据仓库
actions:{
         getList(){
          console.log(two().list); //因为即使是引入过来它还是一个方法             
          }
          
    //定义按钮点击吧它打印出来
    const getlist=()=>{
        store.getList()
    }