vue3 ts pinia

一、安装

npm install pinia

二、构建(main.ts)

1、引入

2、生成

3、使用

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
// 1.引入
import {createPinia} from 'pinia'
const app = createApp(App)
// 2、生成
let pinia = createPinia()
app.use(router)
// 3.引用
app.use(pinia)
app.mount('#app')

 三、存储、读取、修改

1、存储

a、新建src/store/xx.ts，xx与组件名相同，用于区分

b、命名规则：use文件名Stroe，'文件名'

import {defineStore} from 'pinia'


export  const useCountStore = defineStore('count', {
    //  存储数据
    state() {
        return{
            sum: 10,
            name:'jojo'
        }
    },
    // 修改数据复杂逻辑
    actions:{},
    // state 简单数据操作
    getters:{
        maxSum(state){
            return state.sum * 10
        },
        upperName:state=>state.name.toUpperCase()
    }
})

2、读取数据

a、引入store

b、生成

c、使用

<template>
    <div class="count">
        <h2>结果：{{ countStroe.sum }}</h2> 
        <h2>姓名：{{ countStroe.upperName }}</h2>
        <select v-model="n">
            <option :value="1">1</option>
            <option :value="2">2</option>
            <option :value="3">3</option>
        </select>
        <button @click="add">加法</button>
        <button @click="sub">减法</button>
    </div>
</template>

<script lang="ts" setup name="Count">
    import { ref } from "vue";
    // 1.引入
    import { useCountStore} from '@/store/count'
    // 2.生成
    let countStroe = useCountStore()

    let n = ref(1)
    function add(){
        // sum.value += n.value
    }
    function sub(){
        // sum.value -= n.value
    }
</script>

3、使用

1、修改单个(直接)

function add(){
    // 1、简单修改
    countStroe.sum += n.value
}

2、批量修改($patch)

// 2.批量修改,键值对
countStroe.$patch({
    sum:20,
    name:'fake'
})

3、复杂逻辑(action)

a、store中对应的ts文件中，action中，写方法

b、在组件中调用 xx.Store.方法(参数)

数据调用

// add 是 store对象ts中 action的方法
countStroe.add(n.value)

修改方法

import {defineStore} from 'pinia'


export  const useCountStore = defineStore('count', {
    //  存储数据
    state() {
        return{
            sum: 10,
            name:'jojo'
        }
    },
    // 修改数据复杂逻辑
    actions:{
        add(value){
            this.sum += value
        }
    },
    // state 简单数据操作
    getters:{
        maxSum(state){
            return state.sum * 10
        },
        upperName:state=>state.name.toUpperCase()
        // upperName(state){
        //     return state.name.toUpperCase
        // }
    }
})

四、简化模板变量长度

1、过程

引入、解构

// 1.引入
import { useCountStore} from '@/store/count'
import {storeToRefs} from 'pinia'
// 2.生成
let countStroe = useCountStore()
// 解构
let {sum, upperName} = storeToRefs(countStroe)

2、简化前

<h2>结果：{{ countStroe.sum }}</h2> 
<h2>姓名：{{ countStroe.upperName }}</h2>

3、简化后

<h2>结果：{{ sum }}</h2> 
<h2>姓名：{{ upperName }}</h2>

五、$subscribe 订阅

1、当store中state的数据发生变化时，调用(执行)这个方法

2、例子

talkStore.$subscribe((mutate:any, state:any)=>{
    console.log(mutate);
    // state数据变化
    console.log(state);
})

 六、pinia的另一种 组合式写法，之前的是键值对写法，下面的是函数写法(在一起)(推荐)

import {defineStore} from 'pinia'
import {reactive} from 'vue'
import {nanoid} from 'nanoid';
// export  const useTalkStore = defineStore('talk',{
//     state() {
//         return{
//             talkList: reactive([
//                 {id:'01', content:'想送你很多很多口红，让你每天还我一点点'},
//                 {id:'02', content:'有一天我会拉着你的手，带你去看你最喜欢的星空'}
//             ])
//         }
//     },
//     actions:{
//         insert(){
//             let taklData =  {id:nanoid() ,content:"哈哈"}
//             this.talkList.unshift(taklData)
//         }
//     },
//     getters:{}
// })


export  const useTalkStore = defineStore('talk',()=>{
    // 相当于state
    let talkList = reactive([
        {id:'01', content:'想送你很多很多口红，让你每天还我一点点'},
        {id:'02', content:'有一天我会拉着你的手，带你去看你最喜欢的星空'}
    ])
    // 相当于action
    function insert(){
        let taklData =  {id:nanoid() ,content:"哈哈"}
        talkList.unshift(taklData)
    }
    return {talkList, insert}
})