vue access imported variable in template

Question

Is there some way to use an imported object in the template without specifying an alias/property for it in the vue component. I.e. can I somehow use variables not defined on "this"

 <template>
        <div v-if="Store.loaded"></div> //Store not defined on component
        <div v-if="store.loaded"></div> //works
    </template>

    <script>
        import Vue from 'vue'
        import { Component } from 'vue-property-decorator'
        import Store from "../store" // can I somehow use this directly?

        @Component
        export default class App extends Vue {
            store = Store // is there some way so I don't need this line?
        }
    </script>

score 2 · Answer 1 · answered Dec 17 '17 at 23:22

2

Can I somehow use variables not defined on "this"

This is not possible as far as I know.

However, looking at your example I can see that you're trying to access properties of the Vuex store. Vuex exposes the store on every instance via this.$store, so you should be able to do this in your templates:

<div v-if="$store.state.loaded">

answered Dec 17 '17 at 23:22

Decade Moon

32,968
8
81
101

Unfortunately it is not a vuex store. It is my own Store object. But maybe I could write a plugin that attaches my store to vue like vuex does – Chris Dec 18 '17 at 11:20

score 1 · Answer 2 · answered Dec 17 '17 at 21:44

1

You could use a plugin, like vuex does. But generally, it is a bad idea.
It makes other people who work with your code question the source of Store field.

answered Dec 17 '17 at 21:44

Bsalex

2,847
1
15
22

vue access imported variable in template

2 Answers2