我正在尝试仅使用 Vue 3 Composition API 创建一个全局商店。
直到现在我一直在做实验,并且我阅读了很多如何使用 Composition API,但是我知道我不知道如何使用 provide
和 inject
.
我所知道的是provide
将拥有将传递给子组件的所有数据,所以我认为我应该将商店导入 main.ts
.代码如下所示:
这是商店(src/store/index.ts):
import { reactive, readonly } from "vue";
const state = reactive({
fnacResults: [],
interResults: [],
});
export default { state: readonly(state) };
这是main.ts
:import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index";
createApp({ provide: { store }, }, App)
.use(router)
.mount("#app");
而当父组件有数据时,如果我使用 inject
,我将能够访问商店内的所有数据。但就我而言,它不起作用。当我设置 provide
时,我感觉错误开始了在我的main.ts
文件。您是否尝试过使用带有
provide
的 Composition API 创建全局商店?和 inject
?顺便说一句,我的组件文件(
src/views/Home.vue
)看起来像这样:<template>
<div>{{ store.state.fnacResults }}</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
inject: ['store']
});
</script>
最佳答案
应用程序 APIcreateApp
的第一个参数应该是组件定义(在您的情况下为 App
)。相反,您可以使用应用程序实例的 provide()
:
createApp(App).provide('store', store).mount('#app')
demo组合 API
使用 Composition API,您可以 use provide像这样:
// Parent.vue
import { provide } from 'vue'
import store from '@/store'
export default {
setup() {
provide('store', store)
//...
}
}
然后在一些后代组件中,您将 inject它与:// Child.vue
import { inject } from 'vue'
export default {
setup() {
const store = inject('store')
return {
results: store.state.interResults
}
}
}
进口或者,将商店导入您需要的地方并直接使用它可能更简单:
// Child.vue
import store from '@/store'
export default {
setup() {
return {
results: store.state.interResults
}
}
}
关于typescript - 使用 Vue 3 Composition API 创建全局商店,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64545382/