Vue状态管理工具pinia的使用以及Vue组件通讯

状态管理工具redux以及resso和zustand都用过了，这里pinia和resso是一样的，存储的状态数据直接写，方法也是直接写就可以了，会自动进行类型推断。

1.pinia的使用

首先入口文件引入pinia之后创建pinia对象用use安装pinia和路由一样

javascript 复制代码

import { createApp } from "vue";
import App from './App.vue'
//引入pinia
import { createPinia } from "pinia";
const app =createApp(App)
//创建pinia
const pinia=createPinia()
//安装pinia
app.use(pinia)
app.mount('#app')

之后创建store文件夹，不同的数据以及数据方法单独创建文件。

编辑

然后用defineStore初始化store容器。

编辑

actions写方法，state写数据。

之后就可以在组件里面引入useCountStore函数调用生成countStore对象就可以引用里面的方法和数据了。

xml 复制代码

<template>
    <div class="count">
        <h2>当前求和{{ sum }}</h2>
        <select name="number" id="" v-model="n">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <button @click="add">增</button>
        <button @click="increase">减</button>
    </div>
</template>
<script setup lang="ts" name="Count">
    import { ref } from 'vue';
    import {useCountStore} from '@/store/count'
    import { storeToRefs } from 'pinia';
    const countStore=useCountStore()
    console.log(countStore.sum);
    let {sum} = storeToRefs(countStore)
    let n =ref(1)
    const add=()=>{
        //第一种修改
        //countStore.sum=countStore.sum+Number(n.value)
        //第二种修改 可以一次修改多种数据
        // countStore.$patch({
        //     sum:+Number(n.value)
        // })
        //第三种修改方式actions
        countStore.add(n.value)
    }
      const increase=()=>{
       countStore.sum=countStore.sum-Number(n.value) 
    }
    //store的监听事件
    //subscribe回调函数接收两个参数 mutate修改的数据 state就是store存储的数据
    countStore.$subscribe((mutate,state)=>{
        console.log('state改变了',mutate,state);
    })
</script>
<style scoped>
    .count{
        background-color: aqua;
    }

    select{
        width: 50px;
    }
    button{
        height: 100px;
        width: 100px;
        background-color: aquamarine;
        color: #000;
    }
</style>