pinia 基础

parent.vue

<template>
    <div>基本数据引用</div>
    <div>{{BaseStore.Obj}}</div>

    <br>
    <a-button type="" @click="BaseStore.addArr">调用 action</a-button>
    <div>调用Getter {{BaseStore.arrString}}</div>

    <div>显示修改的数据</div>
    <div>{{BaseStore.count}}</div>

</template>
<script setup>
import { onUnmounted } from 'vue';
import { useBaseStore } from './store'
const BaseStore = useBaseStore()

var Timer = setInterval(() => {
    BaseStore.count++
}, 1000);

// 注销组件事件
onUnmounted(() => {
    clearInterval(Timer);
})
</script>

<style lang="less" scoped>

</style>

store.js

import { defineStore } from 'pinia'
// 这是一个最简单的 Store 实例
// 这个 Store 并不会注册在全局组件中
// 创建一个 Store 对象
export const useBaseStore = defineStore('Base', {
    state: () => {
        return {
            // 创建基本数据结构
            count: 0,
            Obj: {
                a: '0',
                b: '0'
            },
            arr: [1, 2],
        }
    },
    getters: {
        arrString() {
            // pinia 下的 Getter，actions，state 都会挂载在 this 下，所以，
            // 尽量不要重名
            return this.arr.join('|');
        }
    },
    actions: {
        // 调用事件
        addArr() {
            this.arr.push(parseInt(Math.random() * 100));
        },
    }
})