Vue 3 Composition API - 重建部分的最佳方法
Vue 3 Composition API - Best approach for rebuild section
我有一个名为 CreateSales.vue 的文件，它是在 Layout.vue 中导入的。重要的是要知道此文件加载以下内容：
<FormModal v-if="processingData" :processingData="processingData" @gateway="saveForm" />
当数据从 FormModal 返回时，将调用一个函数，通过 API 存储它。这一切都很好。
问题：API添加东西后，我想确保后台的table再次自动刷新。但是，在 CreateSales.vue 中没有直接的 link（如 parent/child）到 SalesTable.vue（生成 table 的地方）。所以我必须查询 SalesTable 中的函数才能再次获取 table。什么是最好的工作方式？
有几种方法可以解决它。
- 全球商店
- Provide/inject
- 事件api
- 为中间的每个组件添加 props 和 listeners
全球商店
我猜，最流行的解决方案是使用全局存储来处理这个问题，无论是以 Vuex 的形式还是自定义配对的向下存储
这是定制商店的样子
mystore.js
const {ref} from "vue";
export const STATES = {INIT:'INIT', LOADING:'LOADING', LOADED:'LOADED'};
export const loadState = ref(STATES.INIT);
现在您可以在两个单独的组件中使用 mystore.js
观察变化
import {loadState, STATES} from "mystore.js";
//...
watch{
loadState(value){
if(value === STATES.LOADED) {
// do something when state changed to loaded
}
}
}
并做出改变
import {loadState, STATES} from "mystore.js";
// ... somewhere where the API is being processed
loadState.value = STATES.LOADING;
api
.get(url)
.then(result => {
// ...
loadState.value = STATES.LOADED;
})
您也可以使用 Vuex，它会在复杂性和样板文件方面增加一点，但当您需要管理更大的商店时有助于更大的应用程序。
Provide/inject
与自定义存储类似，但不是将变量放在单独的文件中，以使其全局可用，您可以在父组件中定义 ref 将其添加到 provide 然后在后代使用 inject 来访问那里的反应变量。
事件API
EventBus 已在 v3 中删除，但您仍然可以使用第 3 方事件发射器，例如 mitt
https://v3.vuejs.org/guide/migration/events-api.html#_2-x-syntax
import mitt from 'mitt';
const app = createApp(App)
app.config.globalProperties.emitter = mitt();
// 组件 1
创建（）{
this.emitter.on('apiLoaded', this.doStuff())
}
// 组件 2
api
.get(url)
.then(结果 => {
// ...
this.emitter.emit('apiLoaded')
})
}
为中间的每个组件添加 props 和 listeners
其他选择已经够多了，没必要求助于这个
我有一个名为 CreateSales.vue 的文件，它是在 Layout.vue 中导入的。重要的是要知道此文件加载以下内容：
<FormModal v-if="processingData" :processingData="processingData" @gateway="saveForm" />
当数据从 FormModal 返回时，将调用一个函数，通过 API 存储它。这一切都很好。
问题：API添加东西后，我想确保后台的table再次自动刷新。但是，在 CreateSales.vue 中没有直接的 link（如 parent/child）到 SalesTable.vue（生成 table 的地方）。所以我必须查询 SalesTable 中的函数才能再次获取 table。什么是最好的工作方式？
有几种方法可以解决它。
- 全球商店
- Provide/inject
- 事件api
- 为中间的每个组件添加 props 和 listeners
全球商店
我猜，最流行的解决方案是使用全局存储来处理这个问题，无论是以 Vuex 的形式还是自定义配对的向下存储
这是定制商店的样子
mystore.js
const {ref} from "vue";
export const STATES = {INIT:'INIT', LOADING:'LOADING', LOADED:'LOADED'};
export const loadState = ref(STATES.INIT);
现在您可以在两个单独的组件中使用 mystore.js
观察变化
import {loadState, STATES} from "mystore.js";
//...
watch{
loadState(value){
if(value === STATES.LOADED) {
// do something when state changed to loaded
}
}
}
并做出改变
import {loadState, STATES} from "mystore.js";
// ... somewhere where the API is being processed
loadState.value = STATES.LOADING;
api
.get(url)
.then(result => {
// ...
loadState.value = STATES.LOADED;
})
您也可以使用 Vuex，它会在复杂性和样板文件方面增加一点，但当您需要管理更大的商店时有助于更大的应用程序。
Provide/inject
与自定义存储类似，但不是将变量放在单独的文件中，以使其全局可用，您可以在父组件中定义 ref 将其添加到 provide 然后在后代使用 inject 来访问那里的反应变量。
事件API
EventBus 已在 v3 中删除，但您仍然可以使用第 3 方事件发射器，例如 mitt
https://v3.vuejs.org/guide/migration/events-api.html#_2-x-syntax
import mitt from 'mitt';
const app = createApp(App)
app.config.globalProperties.emitter = mitt();
// 组件 1 创建（）{ this.emitter.on('apiLoaded', this.doStuff()) }
// 组件 2 api .get(url) .then(结果 => { // ... this.emitter.emit('apiLoaded') }) }
为中间的每个组件添加 props 和 listeners
其他选择已经够多了，没必要求助于这个