3

我有一个像这样的 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？

4

1 回答 1

2

从您的商店及其模块中，您可以返回一个商店工厂——一个从商店接收应用程序实例createApp并返回商店的函数：

// 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')

演示

于 2021-07-16T04:47:04.100 回答