如何从商店访问 Vue 3 全局属性

Question

在 Vue 2 中，我曾经像这样导入 Vue 并访问全局属性（来自商店）：

import Vue from 'vue'    
Vue.config.myGlobalProperty

根据 new documentation，在 Vue 3 中，全局属性是使用 createApp 返回的 app 对象声明的：

const app = createApp({})
app.config.globalProperties.myGlobalProperty

然后通过调用this.myglobalProperty

在子组件中访问

但是如何从商店访问全局属性？我尝试了 exporting/importing 应用程序对象，但它不起作用（可能是因为应用程序是在导入商店后创建的）。

在 Vue 2 中，我曾经像这样在商店中使用全局属性：
main.js 文件中的声明：

import Vue from 'vue'
Vue.config.myglobalProperty = 'value'

店内使用情况：

import Vue from 'vue'
Vue.config.myglobalProperty

在 Vue3 中有没有好的方法来做到这一点？

我注意到一个更好的方法 provide/inject properties 但它只适用于子组件而不适用于商店。

Answer 1

如果您不使用 Vuex 等，您可以通过 provide/inject 在应用程序本身上轻松创建您的商店，如示例中所示（示例已简化以便理解）：

const createState = () => reactive({counter: 0, anyVariable: 1});
const state = createState();
const key = 'myState';

// example of reactivity outside a component
setInterval(() => {
  state.counter++;
}, 1000);

const app = createApp({});
app.provide('myState', state); // provide is used on the whole application

可以看到，自己的store完全可以在组件外使用

内部组件，您可以使用（示例）：

  setup() {
  ...
    const globalState = inject('myStore'); // reactive => {counter: 0, anyVariable: 1}
  ...
    return {globalState, ...}
  }

因此，您可以在多个 Vue 应用程序中拥有多个商店。

希望这个例子对你有所帮助。

Answer 2

您可以将 app 实例传递给 商店工厂:

// store.js
import { createStore as createVuexStore } from 'vuex'

export const createStore = (app) => {
  return createVuexStore({
    actions: {
      doSomething() {
        if (app.config.globalProperties.myGlobal) {
          //...
        }
      }
    }
  })
}

并像这样在 main.js 中使用它：

// main.js
import { createApp } from 'vue'
import { createStore } from './store'

const app = createApp({})
const store = createStore(app)
app.use(store)
app.mount('#app')

如果您的商店模块需要访问 app 实例，您可以对 模块工厂:

使用与上面相同的技术

// moduleA.js
export default (app) => {
  return {
    namespaced: true,
    actions: {
      doSomething() {
        if (app.config.globalProperties.myOtherGlobal) {
          //...
        }
      }
    }
  }
}

然后像这样将其导入您的商店：

// store.js
import moduleA from './moduleA'
import { createStore as createVuexStore } from 'vuex'

export const createStore = (app) => {
  return createVuexStore({
    modules: {
      moduleA: moduleA(app),
    }
  })
}

如何从商店访问 Vue 3 全局属性

How to access Vue 3 global properties from the store

javascript

vue.js

vuex

vuejs2

vuejs3