Vue Lynx
  • English

      • Using Pinia

      Pinia is the official state management library for Vue. It provides a type-safe, extensible, and modular store with an intuitive API built on the Composition API.

      See also: Vue.js — State Management

      piniasrc/App.vue

      Installation

      npm install pinia

      Setup

      Register Pinia with your vue-lynx app:

      src/index.ts
      import { createApp } from 'vue-lynx';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount();

      Defining a Store

      Use defineStore with the setup syntax to create a store:

      src/stores/counter.ts
      import { ref, computed } from 'vue';
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const doubleCount = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, doubleCount, increment };
});

      Using the Store in a Component

      src/CounterSection.vue
      <script setup lang="ts">
import { useCounterStore } from './stores/counter';

const counter = useCounterStore();
</script>

<template>
  <view>
    <text>Count: {{ counter.count }}</text>
    <text>Double: {{ counter.doubleCount }}</text>
    <text @tap="counter.increment">+1</text>
  </view>
</template>

      See Pinia — Core Concepts for additional resources.