pinia入门

August 12, 2022

pinia 是 vue 的状态管理库

store

创建 store

import { defineStore } from "pinia";

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore("storeId", {
    state: () => {
        return {
            counter: 0,
            name: "Eduardo",
            isAdmin: true,
        };
    },
    getters: {
        doubleCount: (state) => state.counter * 2,
    },
    // other options...
});

在 vue 应用中使用 store

html

<script>
    import { useStore } from "@/stores/counter";

    export default {
        setup() {
            const store = useStore();
            // store 是一个用 reactive 包裹的对象
            return {
                // 返回整个 store 实例以在模板中使用它
                store,
            };
        },
    };
</script>

提取 store 属性同时保持其响应式

html

<script>
    import { storeToRefs } from "pinia";

    export default defineComponent({
        setup() {
            const store = useStore();
            // `name` 和 `doubleCount` 是响应式引用
            // 这也会为插件添加的属性创建引用
            // 但跳过任何 action 或 非响应式（不是 ref/reactive）的属性
            const { name, doubleCount } = storeToRefs(store);

            return {
                name,
                doubleCount,
            };
        },
    });
</script>

state

重置状态为初始值

import { defineStore } from "pinia";

const useStore = defineStore("storeId", {
    state: () => {
        return {
            counter: 0,
        };
    },
});

const store = useStore();
store.$reset();

改变状态

const store = useStore();
// 直接改变状态
store.counter++;
// 替换状态
store.$state = { counter: 666, name: "Paimon" };
// 批量改变状态
store.$patch({
    counter: store.counter + 1,
    name: "Abalam",
});
// 函数式批量改变状态，对于数组的修改尤为方便
cartStore.$patch((state) => {
    state.items.push({ name: "shoes", quantity: 1 });
    state.hasChanged = true;
});
// 订阅状态
cartStore.$subscribe((mutation, state) => {
    // import { MutationType } from 'pinia'
    mutation.type; // 'direct' | 'patch object' | 'patch function'
    // 与 cartStore.$id 相同
    mutation.storeId; // 'cart'
    // 仅适用于 mutation.type === 'patch object'
    mutation.payload; // 补丁对象传递给 to cartStore.$patch()

    // 每当它发生变化时，将整个状态持久化到本地存储
    localStorage.setItem("cart", JSON.stringify(state));
});

不使用组合式 API （setup() hook）时

html

<script>
    import { mapState } from "pinia";
    import { useCounterStore } from "../stores/counterStore";

    export default {
        computed: {
            // 允许访问组件内部的 this.counter
            // 与从 store.counter 读取相同
            ...mapState(useCounterStore, {
                // myOwnName 映射到 store 的 counter 属性
                myOwnName: "counter",
                // 您还可以编写一个访问 store 的函数
                double: (store) => store.counter * 2,
                // 它可以正常读取“this”，但无法正常写入...
                magicValue(store) {
                    return store.someGetter + this.counter + this.double;
                },
            }),
            // 如果需要这些状态（原始值）可写，使用 mapWritableState() 函数替代
            // 注意，如果是对象或数组直接使用 mapState 即可，无需使用此函数
            ...mapWritableState(useCounterStore, ["counter"]),
            // 当然也可以进行重导出，就像上方 mapState 一样
            ...mapWritableState(useCounterStore, {
                myOwnName: "counter",
            }),
        },
    };
</script>

getters

getters 相当于 computed

export const useStore = defineStore("main", {
    state: () => ({
        counter: 0,
    }),
    getters: {
        // 使用 state 参数时，自动将返回类型推断为数字
        doubleCount(state) {
            return state.counter * 2;
            // or: doubleCount: (state) => state.counter * 2,
        },
        // 使用 this 时，返回类型必须明确设置
        doublePlusOne(): number {
            return this.counter * 2 + 1;
        },
    },
});

actions

actions 相当于 methods

export const useStore = defineStore("main", {
    state: () => ({
        counter: 0,
    }),
    actions: {
        increment() {
            this.counter++;
        },
        randomizeCounter() {
            this.counter = Math.round(100 * Math.random());
        },
        async login(username, password) {
            // actions 可以是异步的
        },
    },
});

订阅 actions

const unsubscribe = someStore.$onAction(
    ({
        name, // action 的名字
        store, // store 实例
        args, // 调用这个 action 的参数
        after, // 在这个 action 执行完毕之后，执行这个函数
        onError, // 在这个 action 抛出异常的时候，执行这个函数
    }) => {
        // 记录开始的时间变量
        const startTime = Date.now();
        // 这将在 `store` 上的操作执行之前触发
        console.log(`Start "${name}" with params [${args.join(", ")}].`);

        // 如果 action 成功并且完全运行后，after 将触发。
        // 它将等待任何返回的 promise
        after((result) => {
            console.log(`Finished "${name}" after ${Date.now() - startTime}ms.\nResult: ${result}.`);
        });

        // 如果 action 抛出或返回 Promise.reject ，onError 将触发
        onError((error) => {
            console.warn(`Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`);
        });
    },
);

// 手动移除订阅
unsubscribe();

注意，无论是 state 订阅还是 actions 订阅，如果 store 位于组件的 setup() 内
那么组件卸载时自动取消订阅

需要在卸载组件后保留，则：

someStore.$onAction(callback, true);
someStore.$subscribe(callback, { detached: true });

plugins

https://pinia.web3doc.top/core-concepts/plugins.html

←Back to home