在 vuex 商店中访问 app.config.globalProperties

Question

我有这样一个 vuex 商店：

const state = {
    status: '',
};

const getters = {
   //...
};

const actions = {

 // ...
};

const mutations = {
// ... 
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations,
}

现在我想访问app.config.globalProperties.$notify

在 Vue.js2 中，我使用了类似 Vue.prototype.$notify 的东西，但这不再有效了。

$notify也是这样设置的：

app.use(routes)
  .provide('notify', app.config.globalProperties.$notify)
  .mount('#app')

很遗憾，我还没有在文档中找到任何关于此的信息。

所以我的问题是：如何在该商店中注入 $notify 或访问 app.config.globalProperties？

Answer 1

从您的商店及其模块，您可以 return 一个 商店工厂 -- 一个从 createApp 和 return是一家商店：

// store/modules/my-module.js
const createStore = app => {
  const mutations = {
    test (state, { committedItem }) {
      app.config.globalProperties.$notify('commited item: ' + committedItem)
    }
  }

  return {
    namespaced: true,
    //...
    mutations,
  }
}

export default app => createStore(app)

// store/index.js
import { createStore } from 'vuex'
import myModule from './modules/my-module'

export default app =>
  createStore({
    modules: {
      myModule: myModule(app)
    }
  })

然后像这样使用商店工厂：

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

const app = createApp(App)
app.use(createStore(app)).mount('#app')

demo

在 vuex 商店中访问 app.config.globalProperties

Access app.config.globalProperties in vuex store

vue.js

vuex

vuejs3

vuex4