如何让全局Pinia的mainStore无需导入即可在所有组件通过this.store访问？

Vue3 实现步骤 #

1. 在应用入口文件（main.js/main.ts）中，完成Pinia注册并将mainStore实例挂载到全局属性：

import { createApp } from 'vue'
import { createPinia, defineStore } from 'pinia'
import App from './App.vue'

// 若mainStore已单独抽离到文件，直接导入useMainStore即可
export const useMainStore = defineStore('main', {
  state: () => ({
    // 你的状态定义
  }),
  actions: {
    // 你的方法定义
  }
})

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

// 初始化mainStore并挂载到全局
const mainStore = useMainStore()
app.config.globalProperties.$store = mainStore

app.mount('#app')

2. 组件中访问方式：

• 选项式API组件直接通过this.$store调用：

export default {
  mounted() {
    console.log(this.$store.someState)
    this.$store.someAction()
  }
}

• <script setup>语法需先获取当前组件实例：

import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()
console.log(proxy.$store.someState)
proxy.$store.someAction()

Vue2 实现步骤 #

1. 在应用入口文件（main.js）中配置：

import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
import App from './App.vue'
import { useMainStore } from './stores/mainStore'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

new Vue({
  pinia,
  render: h => h(App),
  created() {
    // 将mainStore实例挂载到Vue原型
    Vue.prototype.$store = useMainStore()
  }
}).$mount('#app')

2. 所有组件中直接通过this.$store访问即可：

export default {
  mounted() {
    this.$store.someAction()
    console.log(this.$store.someState)
  }
}

注意事项 #

• 若mainStore已单独抽离到@/stores/mainStore.js文件，只需在入口文件中导入useMainStore，无需重复定义。
• 全局挂载后，所有组件均可直接调用，无需每次导入。

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