如何从另一个动作中调用 Pinia 动作？答案

【问题标题】：How to call Pinia action from another action?如何从另一个动作中调用 Pinia 动作？
【发布时间】：2022-10-18 02:41:35
【问题描述】：

有没有办法从同一家商店的另一个动作中调用 Pinia 商店动作？例如，我有这样的 Pinia 商店：

export const useCounter = defineStore({
    id: 'counter',

    state: () => ({
        counter: 0
    }),

    actions: {
        addOne() {
            this.state.counter++
        },
        addTwo() {
            // Can i call here addOne action?
            // Things like this not working:
            this.addOne();
            this.addOne();
            // This is not working too:
            this.actions.addOne();
            this.actions.addOne();
        }
    }
});

我可以在 addTwo 中调用 AddOne 操作吗？

【问题讨论】：

“不工作”对问题的描述不够准确

标签： vue.js pinia

【解决方案1】：

经过一番研究，我找到了某种答案。不要相信做这样的事情是可以的，但这很有效。

基本上，我们只需要在动作内部调用主存储函数（在我的例子中是useCounter），我们需要从同一个存储中调用另一个动作，然后像往常一样调用存储的动作。

export const useCounter = defineStore({
    id: 'counter',

    state: () => ({
        counter: 0
    }),

    actions: {
        addOne() {
            this.state.counter++
        },
        addTwo() {
            const counterStorage = useCounter();
            counterStorage.addOne();
            counterStorage.addOne();
        }
    }
});

Pinia 文档中有一个这样的例子，但是它说我们可以这样做来从另一个存储调用操作，所以这让我很困惑。

【讨论】：

我面临同样的问题.. 必须再次调用创建商店的实例似乎有点奇怪.. 您可以分享您在 Pinia 文档中的答案中提到的示例的链接吗？
@AlimBolar 我在 Pinia 文档中没有找到它，但我在那里看到你可以像这样访问另一个商店。我只是将其作为实验进行尝试，并且有效。 pinia.vuejs.org/cookbook/composing-stores.html#nested-stores

【解决方案2】：

您确实可以通过this 访问同一商店的方法。只是在我自己的商店的操作方法中使用它。 getPost 操作方法通过this（checkPost，fetchPost）访问同一商店的多个方法，它工作得很好。

import {defineStore} from 'pinia';
import axios from 'axios';
const axiosInstance = axios.create({
    baseURL: window.wue.restUrl,
})

export const useBlogStore = defineStore(
    'blog',
    {
        state: () => ({
            posts: [],

        }),
        getters: {
            postCount(state) {
                return state.posts.length;
            },
            checkPost(state) {
                return (property, value) => (state.posts.find(post => post[property] === value));
            }
        },
        actions:{
            addPost(post) {
                this.posts.push(post)
            },
            async getPost(property, value) {
                if (this.checkPost(property, value)) {
                    return this.checkPost(property, value);
                } else {
                    return this.fetchPost(property, value);
                }
            },
            async fetchPost(property, value) {
                try {
                    let json;
                    if (property === "slug") {
                        json = await axiosInstance.get(`posts?slug=${value}`);
                    } else if (property === "id") {
                        json = await axiosInstance.get(`posts/${value}`);
                    }
                    const post = json.data[0];
                    this.addPost(post);
                    return post;
                } catch (error) {
                    alert(error);
                    console.log(error);
                }
            },
     }
});

【讨论】：