在Quasar中同时实例化Vuex与Pinia Store的实现方案

云原生阿岚

2026-6-24

在Vue3 Quasar项目中同时使用Vuex和Pinia（无需修改自动生成的app.js）

实现步骤：

创建Pinia启动文件
在src/boot目录下新建pinia.js，内容如下：

import { createPinia } from 'pinia'

export default ({ app }) => {
  // 初始化Pinia实例
  const pinia = createPinia()
  // 将Pinia挂载到Vue应用
  app.use(pinia)
}

注册Pinia启动文件
打开quasar.config.js，在boot数组中添加'pinia'，让Quasar在应用启动时自动加载该文件：

module.exports = configure(function (ctx) {
  return {
    // ...其他配置
    boot: [
      'pinia', // 新增这一行
      // ...其他已有的boot文件
    ],
    // ...其他配置
  }
})

保留原Vuex配置
你的store/index.js保持现有Vuex实例化代码不变，Quasar会自动识别并挂载这个Vuex Store，无需做任何修改：

// 示例Vuex配置（你的现有代码）
import { createStore } from 'vuex'

const store = createStore({
  state: { /* ... */ },
  mutations: { /* ... */ },
  actions: { /* ... */ },
  modules: { /* ... */ }
})

export default store

组件中同时使用两者：

Vuex用法不变：继续使用mapState、mapActions等Vuex辅助函数，或者直接通过this.$store访问（选项式API）。
Pinia用法：在组件的setup函数中导入并使用Pinia store：

import { useUserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = useUserStore()
    
    // 使用Pinia store的状态和方法
    const userName = userStore.name
    const updateUserName = userStore.updateName
    
    return { userName, updateUserName }
  }
}