访问JS文件中的Vuex模块

Question

我正在使用Quasar framework+Vue3并在我的Vuex Store中导入一个模块。当我在Vue文件中使用它时，它工作得很好，但如何从JS文件访问它？我可以在设置模块中记录状态，但所有内容都是空白的。它似乎还没有初始化，但我如何才能获得初始化并填满的存储？此外，当Vuex存储更新时，我试图从JS文件中获取更新后的数据，它只显示blank/null。

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

import useStore from '../store'
const store = useStore()
export function sample () {
console.log(store.state.isProdBuild) // this works
console.log(store.state.settings.sampleParam) // doesnt work, seems like the value isnt initialized
}

救命！谢谢

Answer 1

实际上应该更容易。来自不同模块的每个状态都将合并到存储的单个状态中，您应该能够像这样使用它：

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

import useStore from '../store'
export function sample () {
console.log(store.state.isProdBuild)
console.log(store.state.sampleParam) // if there's sampleParam in the settings module this should work
}

Answer 2

找到了解决此问题的方法。

在我的JS文件中，我只是添加了一个setter函数来设置存储。

let store = null
export setStore(val) {
store = val
}
export function sample () {
console.log(store.state.isProdBuild)
console.log(store.state.settings.sampleParam)
}

然后在我的Vue文件中：

import { onMounted } from 'vue'
import { useStore } from 'vuex'
import { setStore, sample } from 'sample-file.js'
const $store = useStore()
onMounted(() => {
setStore($store)
})

然后从sample-file.js调用访问Vuex存储的任何方法现在都可以工作，并且状态总是更新的。