Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vue access imported variable in template

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>
like image 982
Chris Avatar asked Dec 17 '17 21:12

Chris


2 Answers

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">
like image 122
Decade Moon Avatar answered Oct 22 '22 06:10

Decade Moon


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.

like image 41
Bsalex Avatar answered Oct 22 '22 06:10

Bsalex