核心概念-Actions

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

xxxxxxxxxx
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中读取

xxxxxxxxxx
<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中读取

xxxxxxxxxx
<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. 下列代码中，画横线的地方填写的是：

xxxxxxxxxx
<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

答案

1=>D