Child.vue组件包含一个按钮,当点击按钮时会触发 <code>submit 方法。在 submit 方法中,使用 defineEmits 函数定义了一个名为 'onSub' 的自定义事件。通过 emit('onSub', success) 触发这个自定义事件,并传递一个名为 'success' 的数据。

<template>

<button @click="submit">提交</button>code>

</template>

<script setup>

// 子传父

const success = "success-666";

const emit = defineEmits(['onSub']);

const submit = () => { -- -->

// 把submit方法传给父组件

emit('onSub', success);

}

</script>

App.vue

在App.vue组件中,引入了 Child 组件。使用 @onSub="handle"code> 监听 Child 组件触发的 'onSub' 事件。当 'onSub' 事件被触发时,会执行 handle 函数,并将 Child 组件传递的数据 'success' 赋值给 res 变量。最后在模板中显示 res 的值

<template>

<Child @onSub="handle"></Child>code>

<h1>{ -- -->{ res }}</h1>

</template>

<script setup>

import { ref } from "vue";

import Child from "./components/Child.vue";

const res = ref("");

const handle = (e) => {

res.value = e;

};

</script>

实现效果：

使用公共变量通信

<code>import { -- --> defineStore } from "pinia";

export const useUserStore = defineStore({

id: "user",

// 数据源

state: () => {

return {

userInfo: {

name: "c",

age: 18,

},

};

},

// 仓库里的方法

actions: {

// 修改数据

changeUserInfo(info) {

this.userInfo = info;

},

// 修改名字

changeUserName(name) {

this.userInfo.name = name;

},

// 修改年龄

changeUserAge(age) {

this.userInfo.age = age;

},

},

// 仓库里的计算方法

getters: {

afterAge(state) {

return state.userInfo.age + 10;

},

},

});

定义 Store:

使用 defineStore 函数定义了一个名为 "user" 的 store。这个 store 就是用于管理用户相关的状态和逻辑。

State:

state 函数返回一个对象,该对象表示 store 的初始状态。在这个例子中,初始状态包含一个 userInfo 对象,包含 name 和 age 属性。

Actions:

actions 对象定义了三个方法:

changeUserInfo: 用于更新整个 userInfo 对象。changeUserName: 用于更新 userInfo.name 属性。changeUserAge: 用于更新 userInfo.age 属性。

这些 action 方法可以在组件中调用,以改变 store 中的状态。

Getters:

getters 对象定义了一个计算属性 afterAge,它会返回 userInfo.age 加 10 的结果。这个计算属性可以在组件中使用,就像使用组件的 computed 属性一样。

接下来我们就去使用它了

首先创建User.vue

这个组件直接使用 <code>useUserStore 获取 user store 的实例。

通过 computed 属性和 storeToRefs 工具函数,我们可以直接访问 store 中的 name 和 userInfo 属性,而不需要手动解构。

在模板中,我们展示了 name、userInfo.age 以及通过 getter 计算的 afterAge。

<template>

<div>姓名{ -- -->{ name }}</div>

<div>年龄{ { userInfo.age }}</div>

<div>十年后年龄{ { userStore.afterAge }}</div>

</template>

<script setup>

import { useUserStore } from "@/store/user";

import { computed } from "vue";

import { storeToRefs } from "pinia";

const userStore = useUserStore();

const name = computed(() => userStore.userInfo.name);

const { userInfo } = storeToRefs(userStore);

</script>

接下来我去创建UpdataUser.vue

这个组件也使用了 <code>useUserStore 获取 user store 实例。在 changeName 和 changeAge 方法中,我们调用了 store 的 changeUserName 和 changeUserAge action 方法来更新状态。这里需要注意,不要直接修改 userStore.userInfo 对象,而是使用定义好的 action 方法。这样可以确保状态的更新是受控的,并且能够触发相关的副作用和订阅。

<template>

<div>

<button @click="changeName">修改名字</button>code>

<button @click="changeAge">修改名字</button>code>

</div>

</template>

<script setup>

import { -- --> useUserStore } from "@/store/user";

const userStore = useUserStore();

const changeName = () => {

// userStore.userInfo.name = "cc";// 不要写这种代码

userStore.changeUserName("cc");

};

const changeAge = () => {

userStore.changeUserAge(20);

};

</script>

App.vue

这是一个简单的父组件,包含了 User 和 UpdataUser 两个子组件。在这个示例中,我们演示了如何在不同的组件中使用同一个 Pinia store。

<template>

<User />

<UpdataUser/>

</template>

<script setup>

import User from "./components/User.vue";

import UpdataUser from './components/UpdataUser.vue'

</script>

实现效果：

但是目前实现的效果是不具备持久化的能力，也就是说如果我们刷新页面，数据就会回到最开始的值

Pinia 支持开启持久化功能