Quasar+Vue3下如何在JS文件中访问Vuex模块状态？

问题原因 #

你当前的Store是通过工厂函数创建的，在JS文件中直接调用useStore()会生成一个全新的Store实例——这个实例并没有经过Quasar应用的初始化流程，也没有执行settings模块的初始化逻辑（比如异步数据加载、state预填充），所以模块状态为空。而Vue组件中调用的useStore()是从Vue的依赖注入系统中获取的已挂载到应用的唯一Store实例，因此能正常访问模块状态。

解决方案 #

方案1：导出已初始化的Store实例 #

修改Store的创建逻辑，在初始化时保存实例，并提供获取方法：

1. 修改store/index.js：

import { createStore } from 'vuex'
import { settings } from './settings'

// 保存已初始化的Store实例
let storeInstance = null

export default function () {
  const Store = createStore({
    modules: {
      settings
    },
    state: {
      isProdBuild: process.env.NODE_ENV === 'production'
    }
  })
  storeInstance = Store
  return Store
}

// 提供获取实例的方法
export const getStore = () => storeInstance

2. 在JS文件中使用：

import { getStore } from '../store'

export function sample () {
  const store = getStore()
  if (!store) {
    console.error('Store尚未完成初始化，请确保应用已启动')
    return
  }
  console.log(store.state.isProdBuild)
  console.log(store.state.settings.sampleParam) // 现在能正常获取已初始化的状态
}

方案2：直接在Boot文件中创建并导出Store实例（更符合Quasar规范） #

Quasar推荐通过Boot文件初始化全局服务，我们可以在这里创建Store并导出实例：

1. 创建boot/store.js（如果已有则修改）：

import { createStore } from 'vuex'
import { settings } from '../store/settings'

// 直接创建Store实例
export const store = createStore({
  modules: {
    settings
  },
  state: {
    isProdBuild: process.env.NODE_ENV === 'production'
  }
})

export default ({ app }) => {
  // 将Store挂载到Vue应用
  app.use(store)
}

2. 在quasar.config.js中确保该Boot文件已注册：

module.exports = {
  boot: [
    'store' // 加入这一行
  ],
  // ...其他配置
}

3. 在JS文件中直接导入该实例：

import { store } from '../boot/store'

export function sample () {
  console.log(store.state.isProdBuild)
  console.log(store.state.settings.sampleParam)
}

关于Store更新后数据仍为空的问题 #

使用上述方案后，JS文件中使用的是与Vue组件相同的Store实例，当Store状态更新时，JS文件中获取到的会是最新值。如果仍有问题，检查settings模块的更新逻辑是否正确提交了mutation，确保状态变更遵循Vuex的规范。

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