Vue3【项目中引入Pinia、组合式API风格、核心概念（State、修改状态、Getters、Actions） 】(十四)-全面详解（学习总结---从入门到深化）(vue引用类型)

Vue3【项目中引入Pinia、组合式API风格、核心概念（State、修改状态、Getters、Actions） 】(十四)-全面详解（学习总结---从入门到深化）

推荐整理分享Vue3【项目中引入Pinia、组合式API风格、核心概念（State、修改状态、Getters、Actions） 】(十四)-全面详解（学习总结---从入门到深化）(vue引用类型)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue引用vue,vue引入插件方法,vue引用d3,vue引入mui,vue引入mui,vue项目引入axios,vue引用d3,vue 引入,内容如对您有帮助，希望把文章链接给更多的朋友！

 

👏作者简介：大家好，我是小童，Java开发工程师，CSDN博客博主，Java领域新星创作者 📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀 🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦 🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人 

目录

为什么要使用 Pinia？

项目中引入Pinia

核心概念-State 

核心概念-修改状态 

 核心概念-Getters

核心概念-Actions 

---

为什么要使用 Pinia？

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经 实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它取而代之的是新的建议

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范 

官方文档：https://pinia.vuejs.org/

中文文档：https://pinia.web3doc.top/

基本示例 

import { defineStore } from "pinia"export const useCountStore = defineStore("count",{ state:() =>{ return{ count:10 } }})

在组件中使用

<template> <p>Count:{{ store.count }}</p></template><script setup> import { useCountStore } from "../stores/count" const store = useCountStore();</script>项目中引入Pinia

在项目引入 pinia 有两种方案 

1 在创建项目结构时选中 pinia

2 创建项目之后，手动下载安装

项目中安装 

npm install pinia --save

创建store仓库

import { defineStore } from "pinia"export const useCountStore =defineStore("count",{ state:() =>{ return{ count:10 } }})

加载store

import { createApp } from 'vue'import App from './App.vue'import { createPinia } from "pinia"createApp(App).use(createPinia()).mount('#app')

组件中使用

<template> <h3>Pinia</h3> <p>Count:{{ count }}</p></template><script setup> import { useCountStore } from "../store/count" const { count } = useCountStore();</script>

实时效果反馈

1. 下列代码中，画横线的地方填写的是：

// store/countimport { defineStore } from "pinia"export const useCountStore = defineStore("count",{ state:() =>{ return{ count:10 } }})<template> <h3>Pinia</h3> <p>Count:{{ count }}</p></template><script setup> import { useCountStore } from "___" const { count } = useCountStore();</script>

A store

B vue

C pinia

D store/count

组合式API风格 

如果你很喜欢组合式API的代码风格，我们甚至可以在Store中采用组合式API来实现 

这会让你上手 pinia 更迅速 

import { defineStore } from "pinia"import { reactive } from "vue"export const useUserInfoStore = defineStore('userinfo',() =>{ const userInfo = reactive({ name:"iwen", age:20 }) return { userInfo }})<template> <h3>用户信息</h3> <p>Name:{{ userInfo.name }}</p> <p>Age:{{ userInfo.age }}</p></template><script setup> import { useUserInfoStore } from "../store/userInfo" const { userInfo } = useUserInfoStore()</script>

创建项目同时引入 pinia

通过选择方式安装 pinia

这种方式默认常见出来的就是组合式API风格

核心概念-State 

大多数时候，state 是 store 的核心部分。 我们通常从定义应用程序的状态开始。 在 Pinia 中，状态被定义为返回初始状态的函数 

import { defineStore } from "pinia"export const useCountStore = defineStore("count",{ state:() =>{ return{ count:10 } }})

访问 “state”

使用组合式API

虽然 Composition API 并不适合所有人，但 setup() 钩子可以使在 Options API 中使用 Pinia 更容易。 不需要额外的 map helper！

<template> <h3>Pinia</h3> <p>Count1:{{ count }}</p></template><script setup> import { useCountStore } from "../store/count" const { count } = useCountStore();</script>

选项式API

如果您不使用 Composition API，并且使用的是 computed 、 methods 、...，则可以使用 mapState() 帮助器将状态属性映射为只读计 算属性

<template> <p>Count2:{{ count }}</p> <p>Count2:{{ doubleCount }}</p></template><script>import { mapState } from "pinia"import { useCountStore } from "../store/count"export default { computed:{ ...mapState(useCountStore,{ myOwnName:"count", count:store => store.count, doubleCount(store){ return store.count * 2 } }) }}</script>

实时效果反馈

1. 下列代码中，画横线的地方填写的是：

import { defineStore } from "pinia"export const useCountStore =defineStore("count",{ state:() =>{ return{ count:10 } }})<template> <p>Count2:{{ count }}</p> <p>Count2:{{ doubleCount }}</p></template><script>import { mapState } from "pinia"import { useCountStore } from "../store/count"export default { computed:{ ...mapState(___,{ myOwnName:"count", count:store => store.count, doubleCount(store){ return store.count * 2 } }) }}</script>

A pinia

B vue

C useCountStore

D store

核心概念-修改状态 

在 pinia 中修改状态要比在 vuex 中修改状态简单的多，因为不用引 入额外的概念，直接用 store.counter++ 修改 store 

组合式API 

<template> <h3>Pinia</h3> <p>Count1:{{ store.count }}</p> <button @click="updateClick">修改状态</button></template><script setup> import { useCountStore } from "../store/count" const store = useCountStore(); function updateClick(){ store.count++ }</script>

选项式API

<template> <p>Count2:{{ count }}</p> <p>Count2:{{ doubleCount }}</p> <button @click="updateClick">修改状态</button></template><script> import { mapState,mapWritableState } from "pinia" import { useCountStore } from "../store/count" export default { computed:{ ...mapState(useCountStore,{ myOwnName:"count", count:store => store.count, doubleCount(store){ return store.count * 2 } }), ...mapWritableState(useCountStore,["count"]) }, methods:{ updateClick(){ this.count++ } }}</script>

实时效果反馈

1. 下列代码中，画横线的地方填写的是：

<template> <p>Count2:{{ count }}</p> <p>Count2:{{ doubleCount }}</p> <button @click="updateClick">修改状态</button></template><script> import { mapState,mapWritableState } from "pinia" import { useCountStore } from "../store/count" export default { computed:{ ...mapState(useCountStore,{ myOwnName:"count", count:store => store.count, doubleCount(store){ return store.count * 2 } }), ...___(useCountStore,["count"]) }, methods:{ updateClick(){ this.count++ } }}</script>

A mapState

B mapWritableState

C mapMutation

D mapAction

 核心概念-Getters

Getter 完全等同于 Store 状态的计算值 

import { defineStore } from "pinia"export const useCountStore = defineStore("count",{ state:() =>{ return{ count:10 } }, getters:{ getCount:(state) => "当前Count："+ state.count }})

组合式API中读取

<template> <h3>Pinia</h3> <p>{{ store.getCount }}</p></template><script setup> import { useCountStore } from "../store/count" const store = useCountStore();</script>

选项式API中读取

<template> <p>{{ getCount }}</p></template><script> import { mapState } from "pinia" import { useCountStore } from "../store/count" export default { computed:{ ...mapState(useCountStore, ["getCount"]) }}</script>

访问其他 getter

getters:{ getCount:(state) => "当前Count："+ state.count, doubleCount(state){ return this.getCount + state.count }}

实时效果反馈

1. 下列代码中，画横线的地方填写的是：

<template> <p>{{ getCount }}</p></template><script> import { mapState } from "pinia" import { useCountStore } from "../store/count" export default { computed:{ ...mapState(useCountStore,___) }}</script>

A [getCount]

B "getCount"

C getCount

D ["getCount"]

核心概念-Actions 

Actions 相当于组件中的 methods。 它们可以使用 defineStore()中的 actions 属性定义，并且它们非常适合定义业务逻辑 

import { defineStore } from "pinia"export const useCountStore = defineStore("count", { state: () => { return { count: 10 } }, getters: { getCount: (state) => "当前Count：" + state.count, doubleCount(state) { return this.getCount + state.count } }, actions: { increment() { this.count++ }, decrement() { this.count-- } }})

组合式API中读取

<template> <h3>Pinia</h3> <p>Count1:{{ store.count }}</p> <button @click="addCountHandler">增加</button> <button @click="minCountHandler">减少</button></template><script setup> import { useCountStore } from "../store/count" const store = useCountStore(); function addCountHandler(){ store.increment() } function minCountHandler(){ store.decrement() }</script>

选项式API中读取

<template> <p>Count2:{{ count }}</p> <p>Count2:{{ doubleCount }}</p> <button @click="addCountHandler">增加</button> <button @click="minCountHandler">减少</button></template><script>import { mapState,mapActions } from "pinia"import { useCountStore } from "../store/count"export default { computed:{ ...mapState(useCountStore,{ myOwnName:"count", count:store => store.count, doubleCount(store){ return store.count * 2 } }) }, methods:{ ...mapActions(useCountStore,["increment","decrement"]), addCountHandler(){ this.increment() }, minCountHandler(){ this.decrement() } }}</script>

实时效果反馈

1. 下列代码中，画横线的地方填写的是：

<template> <p>Count2:{{ count }}</p> <p>Count2:{{ doubleCount }}</p> <button @click="addCountHandler">增加</button> <button @click="minCountHandler">减少</button></template><script> import { mapState,mapActions } from "pinia" import { useCountStore } from "../store/count" export default { computed:{ ...mapState(useCountStore,{ myOwnName:"count", count:store => store.count, doubleCount(store){ return store.count * 2 } }) }, methods:{ ...___(useCountStore,["increment","decrement"]), addCountHandler(){ this.increment() }, minCountHandler(){ this.decrement() } }}</script>

A mapState

B mapGetter

C mapMutation

D mapActions