使用 Vue 3 Composition API 创建全局商店 [英] Create a Global Store using Vue 3 Composition API
问题描述
我正在尝试仅使用 Vue 3 Composition API 创建一个全局商店.
直到现在我一直在做实验，我读了很多如何使用 Composition API，但我知道我不知道如何使用 provide 和 inject.
我所知道的是 provide 将拥有将传递给子组件的所有数据，所以我认为我应该将 store 导入到 main.ts.代码如下所示:
这是商店(src/store/index.ts):
import {reactive, readonly } from vue";const 状态 = 反应性({fnacResults: [],结果间:[]，});出口默认{状态:只读(状态)}；这是main.ts:
import { createApp } from vue";从./App.vue"导入应用程序；从./router"导入路由器；从./store/index"导入商店；createApp({ 提供: { store }, }, App).使用(路由器).mount(#app");当父组件有数据时，如果我使用inject，我将能够访问商店内的所有数据.但就我而言，它不起作用.我有一种感觉，当我在 main.ts 文件中设置 provide 时，错误就开始了.
您是否尝试过使用 Composition API 和 provide 和 inject 创建全局存储?
顺便说一句，我的组件文件(src/views/Home.vue)看起来像这样:
{{ store.state.fnacResults }}</模板><script lang="ts">从vue"导入{defineComponent}；导出默认defineComponent({注入:['商店']});
Application API
createApp 的第一个参数应该是组件定义(在您的情况下为 App).相反，您可以使用应用实例的 provide():
createApp(App).provide('store', store).mount('#app')组合 API
使用 Composition API，您可以使用提供 像这样:
//Parent.vue从'vue'导入{提供}从@/store"导入商店导出默认{设置() {提供('商店'，商店)//...}}然后在某些后代组件中，您将 注入 与:
//Child.vue从'vue'导入{注入}导出默认{设置() {const store = 注入('存储')返回 {结果:store.state.interResults}}}导入
或者，在需要的地方导入 store 并直接使用它可能更简单:
//Child.vue从@/store"导入商店导出默认{设置() {返回 {结果:store.state.interResults}}}I am trying to create a global store using only the Vue 3 Composition API.
Until now I have been doing experimentation, and I read a lot how to use the Composition API, but right know I don't know how to use the provide and the inject.
All I know is that the provide will have all the data that will pass to a child component, so I thought that I should import the store into the main.ts. And the code looks like this:
This is the store (src/store/index.ts):
import { reactive, readonly } from "vue";
const state = reactive({
fnacResults: [],
interResults: [],
});
export default { state: readonly(state) };
This is the 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");
And when the parent component has the data, if I use the inject, I will be able to have access to all the data inside of the store. But in my case, it doesn't work. I have a feeling that the error starts when I set the provide in my main.ts file.
Have you tried to create a global store using the Composition API with provide and inject?
Btw, my component file (src/views/Home.vue) looks like this:
<template>
<div>{{ store.state.fnacResults }}</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
inject: ['store']
});
</script>
Application API
The createApp's first argument should be a component definition (which would be App in your case). Instead, you could use the app instance's provide():
createApp(App).provide('store', store).mount('#app')
Composition API
With the Composition API, you could use provide like this:
// Parent.vue
import { provide } from 'vue'
import store from '@/store'
export default {
setup() {
provide('store', store)
//...
}
}
Then in some descendent component, you'd inject it with:
// Child.vue
import { inject } from 'vue'
export default {
setup() {
const store = inject('store')
return {
results: store.state.interResults
}
}
}
Import
Alternatively, it might be simpler to just import the store where you need it, and use it directly:
// Child.vue
import store from '@/store'
export default {
setup() {
return {
results: store.state.interResults
}
}
}
这篇关于使用 Vue 3 Composition API 创建全局商店的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
