能否为Pinia Actions划分命名空间实现层级调用？

你可以通过两种优雅的方式实现Pinia Actions的层级命名空间调用，避免冗长的方法名，同时保持Pinia的特性支持：

方案一：Setup API风格（推荐） #

Pinia的Setup API天然支持返回任意结构的对象，直接定义命名空间并暴露即可：

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useMyStore = defineStore('myStore', () => {
  const count = ref(0)

  // 定义n1命名空间的方法
  const n1 = {
    a(msg) {
      console.log(msg, count.value)
      count.value++
    },
    // 可添加更多同命名空间方法
    reset() {
      count.value = 0
    }
  }

  // 定义n2命名空间的方法
  const n2 = {
    b() {
      console.log('n2b called, current count:', count.value)
    }
  }

  // 暴露状态和命名空间
  return {
    count,
    n1,
    n2
  }
})

调用方式：

const store = useMyStore()
store.n1.a('hi') // 输出 "hi 0"，count变为1
store.n2.b() // 输出 "n2b called, current count: 1"
store.n1.reset() // count重置为0

方案二：Options API风格 #

如果习惯Options API，可以通过created钩子将命名空间挂载到store实例上，同时绑定正确的上下文：

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0
  }),
  // 内部actions（用前缀避免命名冲突）
  actions: {
    _n1a(msg) {
      console.log(msg, this.count)
      this.count++
    },
    _n1Reset() {
      this.count = 0
    },
    _n2b() {
      console.log('n2b called, current count:', this.count)
    }
  },
  created() {
    // 挂载命名空间到store实例，绑定this确保上下文正确
    this.n1 = {
      a: this._n1a.bind(this),
      reset: this._n1Reset.bind(this)
    }
    this.n2 = {
      b: this._n2b.bind(this)
    }
  }
})

调用方式和Setup API完全一致：

const store = useMyStore()
store.n1.a('hi')
store.n2.b()

原方案的问题 #

你之前的namespace1()方法每次调用都会返回新对象，不仅冗余，还可能导致上下文绑定问题，且内部方法无法被Pinia DevTools正确追踪。上面的两种方案都能完美兼容DevTools，同时保持代码整洁。

扩展场景 #

针对你提到的bath.paint()、kitchen.paint()这类场景，用Setup API可以轻松实现：

export const useRoomStore = defineStore('room', () => {
  const bathColor = ref('white')
  const kitchenColor = ref('beige')

  const bath = {
    paint(color) {
      bathColor.value = color
    },
    clean() {
      console.log('Cleaning bathroom')
    }
  }

  const kitchen = {
    paint(color) {
      kitchenColor.value = color
    },
    rearrange() {
      console.log('Rearranging kitchen')
    }
  }

  return { bathColor, kitchenColor, bath, kitchen }
})

调用：

const store = useRoomStore()
store.bath.paint('blue')
store.kitchen.paint('gray')

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