使用 Pinia

Pinia 是 Vue 的官方状态管理库。它提供了类型安全、可扩展且模块化的 store，API 基于组合式 API 构建，使用起来非常直观。

安装

npm install pinia

设置

将 Pinia 注册到你的 vue-lynx 应用中：

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();

定义 Store

使用 defineStore 配合 setup 语法来创建 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 };
});

在组件中使用 Store

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>

查看 Pinia — 核心概念了解更多资源。

#使用 Pinia

#安装

#设置

#定义 Store

#在组件中使用 Store

使用 Pinia

安装

设置

定义 Store

在组件中使用 Store