开发：Vue3

<template>
  <div>
    <h1>{{ counter }}</h1>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'pinia';

const counter = ref(0);
const store = useStore();

const increment = () => {
  counter.value++;
  store.increment();
};

const decrement = () => {
  counter.value--;
  store.decrement();
};
</script>

<style scoped>
.counter {
  text-align: center;
  font-size: 24px;
}
</style>

以上代码中的计数器组件使用了 Vue 3 的 Composition API 和 <script setup> 语法，将模板、脚本和样式组合到一个单独的 Vue 文件中。视图中显示了中文文本，并包含了相应的样式。

为了实现计数器的功能，我们使用了 ref 函数来创建一个响应式的变量 counter，并初始化为 0。我们还使用了 useStore 函数来访问 Pinia 状态管理库中的全局状态。

increment 函数用于增加计数器的值，它通过修改 counter 的值实现，并调用了 Pinia 的 increment 方法来更新全局状态。

decrement 函数用于减少计数器的值，它通过修改 counter 的值实现，并调用了 Pinia 的 decrement 方法来更新全局状态。

在样式部分，我们使用了 scoped 属性来限定样式的作用范围，确保仅应用于当前组件。

你可以将以上代码保存到一个 .vue 文件中，并使用 Yarn、Vite 和其他所需的工具来构建和运行该计数器组件。