pinia实现组件间的通信（状态管理）

vuex：集中式状态管理容器，可以实现任意组件之间的通信
核心概念:state,mutations,actions.getters,modules
pinia：集中式管理状态容器，可以实现任意组件之间的通信
核心概念：state.actions，getters

新建strore仓库，在main.ts中引入并使用

pinia选择式api:（写法类似于vuex）

//定义info小仓库
import { defineStore } from "pinia";
//第一个仓库:小仓库名字  第二个参数:小仓库配置对象
//defineStore方法执行会返回一个函数,函数作用就是让组件可以获取到仓库数据
let useInfoStore = defineStore("info", {
    //存储数据:state
    state: () => {
        return {
            count: 100,
            arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
        }
    },
    actions: {
        //注意:函数没有context上下文对象
        //没有commit、没有mutations去修改数据
        updateNum(a: number, b: number) {
            this.count += a;
        }
    },
    getters: {
        total() {
            let result: any = this.arr.reduce((prev: number, next: number) => {
                return prev + next;
            }, 0);
            return result;
        }
    }
});
//对外暴露方法
export default useInfoStore;

页面使用：

<template>
  <div class="son">
    {{ infoStore.count }}--{{ infoStore.total }}
    <button @click="update">点击修改数据</button>
  </div>
</template>

<script setup lang="ts">
import userInfoStore from "../../store/modules/info";
// 获取小仓库对象
let infoStore = userInfoStore();
// 修改数据的方法
const update = () => {
  infoStore.count++;
  infoStore.updateNum(8, 0); // 调用自身的方法
};
// console.log(infoStore);
</script>

pinia组合式api:

//定义组合式API仓库
import { defineStore } from "pinia";
import { ref, computed,watch} from 'vue';
//创建小仓库
let useTodoStore = defineStore('todo', () => {
    let todos = ref([{ id: 1, title: '吃饭' }, { id: 2, title: '睡觉' }, { id: 3, title: '打豆豆' }]);
    let arr = ref([1,2,3,4,5]);

    const total = computed(() => {
        return arr.value.reduce((prev, next) => {
            return prev + next;
        }, 0)
    })
    //务必要返回一个对象:属性与方法可以提供给组件使用
    return {
        todos,
        arr,
        total,
        updateTodo() {
            todos.value.push({ id: 4, title: '组合式API方法' });
        }
    }
});

export default useTodoStore;

页面使用：

<template>
  <div class="son1">
    <div @click="update">{{ todoStore.todos }}</div>
    <div>{{ todoStore.arr }}</div>
    <div>{{ todoStore.total }}</div>
  </div>
</template>

<script setup lang="ts">
import useTodoStore from "../../store/modules/todo";
let todoStore = useTodoStore();
const update = () => {
  todoStore.updateTodo();
};
</script>