如何使库在 Composition API 中全局可用？

Question

我基本上在每个组件中都需要vuex store，并想知道是否有办法省略：

import {useStore} from "vuex";

const store = useStore()

从所有组件中自动导入它，这样我就可以像这样使用它：

store.state.image = "..."

现在我已经在一个单独的 store.js 文件中导入了store：

import {createStore} from "vuex";

const store = createStore({
    state() {
        return {
            image: sessionStorage.image || ""
        }
    }
})

export default store

并在app.js注册：

require('./bootstrap');

import {createApp} from 'vue';
import app from "../vue/app";
import store from "./store";

createApp(app)
    .use(store)
    .mount("#app");

我试过了：

createApp(app)
    .component('store', store)
    .mount("#app");

但它说type any 的store object 不能注册为component。

Answer 1

既然您使用的是useStore，那么您一定使用过setup。

export default defineComponent({
    setup() {
        const store = useStore();
    }
})

此声明仅适用于setup。因为setup 中没有this，所以这是获取store 的另一种方式。

正如您所说，您想在全球范围内使用它。但是只要在setup，你必须要导入这个方法。即使您想使用全局方法。

要访问setup 挂钩中的存储，您可以调用useStore 函数。这相当于使用 Option API 在组件中检索this.$store。 [vuex composition api guide]

所以你可以在任何其他地方使用this.$store.state.image，比如vue2。

the simplest store