Pinia es una solución de gestión de estado para Vue.js que ofrece funcionalidades similares a Vuex, permitiendo el intercambio de estado global en toda la aplicación. Su integración en Uni-app es directa y no requiere instalaciones adicionales dentro del entorno HBuilder X.

Configuración Inicial en main.js

Para habilitar Pinia, es necesario importarlo y registrarlo como un plugin de la aplicaicón Vue. Sigue estos pasos en tu archivo main.js:

import { createSSRApp } from 'vue';
import { createPinia } from 'pinia'; // Importa la función createPinia

export function createApp() {
    const app = createSSRApp(App);
    app.use(createPinia()); // Utiliza la instancia de Pinia
    return {
        app,
        // No es necesario retornar Pinia en este contexto para Uni-app
    };
}

Definición de Stores (Almacenes de Estado)

Los stores definen el estado compartido, las mutaciones y las acciones. Se crean en archivos separados, típicamente dentro de un directorio stores.

// stores/computation.js
import { defineStore } from 'pinia';

// 'computation' es un identificador único para este store.
export const useComputationStore = defineStore('computation', {
    // El estado inicial del store.
    state: () => ({
        currentValue: 0,
        operationType: '+'
    }),

    // Métodos para modificar el estado.
    actions: {
        // Realiza una operación basada en el tipo de operación.
        performOperation(operand) {
            switch (this.operationType) {
                case '+':
                    this.currentValue += operand;
                    break;
                case '-':
                    this.currentValue -= operand;
                    break;
                case '*':
                    this.currentValue *= operand;
                    break;
                case '/':
                    if (operand !== 0) {
                        this.currentValue /= operand;
                    }
                    break;
                default:
                    console.warn('Operación no reconocida:', this.operationType);
            }
            console.log('Valor actualizado:', this.currentValue);
        },
        // Métodos específicos para cada operación (opcional, se pueden integrar en performOperation)
        add(operand) {
            this.currentValue += operand;
        },
        subtract(operand) {
            this.currentValue -= operand;
        },
        multiply(operand) {
            this.currentValue *= operand;
        },
        divide(operand) {
            if (operand !== 0) {
                this.currentValue /= operand;
            }
        }
    }
});

Uso del Store en Componentes

Para acceder y modificar el estado global, importa y utiliza la función del store dentro de tus componentes Vue. La reactividad está integrada automáticamente.

// pages/index.vue (o cualquier otro componente)
import { ref, computed } from 'vue';
import { useComputationStore } from '@/stores/computation.js'; // Ajusta la ruta si es necesario

export default {
    setup() {
        const computationStore = useComputationStore();
        const inputValue = ref(0);

        // Configuración para un selector de operaciones.
        const operationOptions = [{
            value: '+',
            text: 'Suma'
        }, {
            value: '-',
            text: 'Resta'
        }, {
            value: '*',
            text: 'Multiplicación'
        }, {
            value: '/',
            text: 'División'
        }];

        // Un computed property para manejar la lógica de la interfaz y la actualización del estado.
        const calculationResult = computed(() => {
            // Actualiza el estado base con el valor de entrada.
            // Nota: La lógica de actualización puede variar según el caso de uso.
            // Aquí se asume que el valor de entrada se establece como el nuevo valor base antes de la operación.
            computationStore.currentValue = parseFloat(inputValue.value);
            // Ejecuta la operación con un valor fijo (ej. 5).
            computationStore.performOperation(5);

            // Retorna una representación para la interfaz, si es necesario.
            // La lógica principal de actualización ya se realizó en las líneas anteriores.
            return `Resultado: ${computationStore.currentValue}`;
        });

        return {
            computationStore,
            inputValue,
            operationOptions,
            calculationResult
        };
    }
}

Ejemplo de Interfaz de Usuario (Template)

A continuación, se muestra un ejemplo de cómo se podría usar el store y sus datos en la plantilla de un componente Uni-app.

<template>
    <view>
        <uni-easyinput v-model="inputValue" type="number" inputBorder placeholder="Introduce un número"></uni-easyinput>

        <uni-data-checkbox v-model="computationStore.operationType" :localdata="operationOptions" mode="tag"></uni-data-checkbox>

        <view>
            Valor ingresado: {{ inputValue }}
            Operación seleccionada: {{ computationStore.operationType }}
            Valor calculado: {{ computationStore.currentValue }}
            <!-- El computed property puede ser llamado directamente si es necesario, pero la lógica principal se ejecuta en setup -->
            <!-- <view>{{ calculationResult }}</view> -->
        </view>
    </view>
</template>