Question

我有一个.vue组件n，我想在台式机上将其添加到一个名为“ desktop_sectors”的容器中

Map

或在移动设备上添加到“移动设备”

O(n)

（据我所知）我需要以编程方式创建Sectors组件，因为我不希望它创建两次，如下所示

<v-flex sm12 md12 ma-2 ref="desktop_sectors">

所以，我以编程方式创建了一次

v-flex sm12 ma-2 ref="mobile">

现在，我在Sectors中只有一个名为Sectors的方法，可以将商店实例发送到该方法，但是我希望有一种更好/正确的方法使Sectors可以使用商店，也许使用 <v-layout align-center justify-center row fill-height hidden-sm-and-down> </v-flex> <v-flex sm12 md12 ma-2 ref="desktop"> </v-flex> </v-layout>  <v-layout align-center justify-center row fill-height hidden-md-and-up pa-t> <v-flex sm12 ma-2 ref="mobile"> <Sectors/> </v-flex> </v-layout>方法或var componentClass = Vue.extend(Sectors) var instance = new componentClass(123) instance.store(this.$store) instance.$mount() console.log(instance) this.$refs.mobile.appendChild(instance.$el) this.$refs.desktop.appendChild(instance.$el)

其他信息 我要以编程方式添加组件，因为事实上，除了store之外，我还有多个组件，它们都订阅了商店中的某些突变，如果我多次创建相同的组件，则会触发触发的API调用是必要条件的两倍

Answer 1

对于 Vue3，您可以从它定义的位置导入 store 并像这样use：

    import <your component> from '<somewhere>';
    import { createApp } from 'vue';
    import { store } from '@/main.js';
    
    ...
    
    createApp(<your component>).use(store).mount("some selector");

Answer 2

我喜欢这样使商店对所有组件可用：

function isMatching() {
    return _.some(toTest , function(a) {
        return _.some(a.split("*"), function(part1, idx1) {
            return (part1.length && _.some(toMatch.split(part1), function(part2, idx2) {
                return (part2.length && idx1 == idx2);
            }));
        });
    });
}

您可以像这样在组件内部对其进行访问：

import storeConfig from './store'
Vue.prototype.$store = Vue.$store = storeConfig

Vue-使Vuex存储可用于以编程方式创建的组件的正确方法

2 个答案: