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

发布时间：2023-04-23 文章分类：WEB开发, 电脑百科投稿人：王小丽字号：默认 | 大 | 超大打印

👏作者简介：大家好，我是小童，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/count
import { 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

标签修改, 入门, 学习

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

为什么要使用 Pinia？

项目中引入Pinia

核心概念-State

核心概念-修改状态

核心概念-Getters

核心概念-Actions

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