如何在Nuxt3中使用Pinia实现数据的存储与读取？

第一步：完善Pinia状态仓库（stores/some.store.ts） #

首先要在仓库里定义状态（state）、修改状态的方法（actions），如果需要计算属性还可以添加getters，示例代码如下：

export const useSomeStore = defineStore('SomeStore', {
  // 定义初始状态
  state: () => ({
    userName: '',
    count: 0
  }),
  // 定义修改状态的方法（支持同步/异步）
  actions: {
    setUserName(name: string) {
      this.userName = name
    },
    incrementCount() {
      this.count++
    },
    // 异步修改示例（模拟接口请求场景）
    async fetchAsyncData() {
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.userName = '异步加载的用户名'
    }
  },
  // 可选：定义计算属性
  getters: {
    doubleCount: (state) => state.count * 2
  }
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useSomeStore, import.meta.hot));
}

第二步：页面中实现数据存储与读取（pages/a.vue） #

你的nuxt.config.ts已经配置了自动导入store和Pinia相关方法，直接调用useSomeStore即可，无需手动导入：

<script setup lang="ts">
// 1. 获取Pinia仓库实例
const someStore = useSomeStore()

// 2. 读取仓库状态（直接访问state属性或getters）
const currentUserName = someStore.userName
const currentCount = someStore.count
const doubleCount = someStore.doubleCount

// 3. 存储/修改数据（通过actions方法操作）
const handleSetName = () => {
  someStore.setUserName('测试用户')
}

const handleIncrement = () => {
  someStore.incrementCount()
}

const handleFetchAsync = async () => {
  await someStore.fetchAsyncData()
}
</script>

<template>
  <div>
    <h3>A</h3>
    <!-- 展示状态数据 -->
    <p>用户名：{{ someStore.userName }}</p>
    <p>计数器：{{ someStore.count }}</p>
    <p>双倍计数器：{{ someStore.doubleCount }}</p>
    
    <!-- 触发修改操作的按钮 -->
    <button @click="handleSetName">设置用户名</button>
    <button @click="handleIncrement">计数器+1</button>
    <button @click="handleFetchAsync">加载异步数据</button>
  </div>
  <div>
    someStore实例：{{ someStore }}
  </div>
</template>

关键细节补充 #

• 如果需要解构状态并保持响应式，可使用storeToRefs：

  import { storeToRefs } from 'pinia'
  const { userName, count } = storeToRefs(someStore)
  

• 禁止直接修改state属性，必须通过actions方法操作，这能保证状态变更可追踪，利于调试和维护。

内容的提问来源于stack exchange，提问作者Naga Vijayapuram