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));
        },
    }
})