I'm having difficulties accessing my api within my store modules. I've created an instance of my api, passed it within my vue creation just like the store. However when trying to implement logic in my module, the this.$api does not work like it works in my components. Is there any way to access my already created instance of api?
const api = new Api();
/* eslint-disable no-new */
new Vue({
components: {App},
router,
api, // <--- I want this.
store, // <--- To be accesable in the modules of this
template: '<App/>'
}).$mount('#app');
So can I access the api instance without creating a new instance in my module or store?
I think you should be able to inject api directly to store, like this:
const store = new Vuex.Store();
const $axios = axios.create();
store.$axios = $axios;
new Vue({
components: {App},
router,
store,
template: '<App/>'
}).$mount('#app');
Anyways, for Axios, it worked fine: https://forum.vuejs.org/t/accessing-axios-in-vuex-module/29414/3
Related
I am trying to use Vuex inside my application. I have just a single note, I cannot do a transpilation on my vue components, so I load them using the following script:
<script src="https://unpkg.com/http-vue-loader"></script>
and I am declaring them as
new window.Vue({
el: '#app',
store: // what I am trying to to
components: {
'fiche-form-content': window.httpVueLoader('/gestion/vue/composants/article-site-form.vue'),
'fiche-list': window.httpVueLoader('/gestion/vue/composants/article-site-list.vue')
},
})
Is it possible to call Vuex through a CDN, write it as a regular Vue store application and inject it without transpilation ? I am new to not using the Vue-cli or webpack on my apps and having no build, so if some one have a better understanding than me I would be happy you share your knowledges. thks
I'm a newbie in javascript and vue.js and I'm facing some issue when trying to add a new route in an existing programme.
I created my new component in a separate file called Miniature.vue
I added the new route in the router definition:
export default new Router({
routes: [
{
path: '/certificat/:id',
name: 'Certificat',
component: Certificat
},
{
path: '/miniature/:id',
name: 'Miniature',
component: Miniature
}
]
})
And then, in the vue instantiation, I added my new components and updated the template :
new Vue({
el: '#app',
router,
components: { Certificat, Miniature } ,
template: '<div>
<Certificat></Certificat>
<Miniature></Miniature>
</div>'
})
The previous template was simply
template: '<Certificat/>'
Problem is, the url is either mywebsite/certificat/123 or mywebsite/miniature/123, both routes are executed, and my two components are displayed !
What is the purpose of the template in the Vue constructor anyway? If I remove it, nothing happens.
What am I missing here ??
Those components are supposed to be loaded from your route, so they shouldn't be in your app template (i.e., they should be removed from #app's components and template).
Your app should contain <router-view> somewhere for the route to be rendered. In your case, replace the app template string with <router-view/>.
It should look similar to this:
new Vue({
el: '#app',
router,
template: '<router-view/>'
})
I should mention your router setup is missing a route for / and 404, so the default path and unknown routes will render nothing in your app. Users would have to navigate to the exact routes you've configured to see anything.
Vue doesn't have routing built-in, for routing you'll need the vue-router package.
To get a better understanding of template and Vue in general, I recommend reading the Introduction guide
I have a global store setting which determines which user role could be 'admin', 'editor' or 'junior-editor'.
A the moment I have to import my store and use make the store variable available in the data.
Is there a way to expose this al all my components?
If using Vuex, you can call it on any component using:
this.$store
For example, in an app with a "user" module and the data is called "role", it would be:
this.$store.state.user.role
There is no need to import store into each component. It should be injected in your main app file (main.js or index.js), like:
new Vue({
el: '#app',
router,
store
})
How can I make axios's API requests reusable through my app,
so I can avoid writing writing the same code over and over again..
//load the axios HTTP library
window.axios = require('axios');
window.Vue = require('vue');
const app = new Vue({
el: '#app',
mounted(){
console.log('hello!');
}
});
I was thinking of trying something like this ( gist ) but I don't know how can I attach the functions to Vue instance and call these functions from vue-components directly ..
You can inject axios as Vue property :
Vue.prototype.$http = require('axios');
Then you can use it like that : this.$http.get(...)
Or you can checkout this repository
Using vuejs 2 and the official vue-router.
How can I access the Router instance from a service that has not been given the instance?
We have an class that listens to a socket, on one particular event heard I need to use the vue-router to redirect to another page but I cannot see anywhere how to do this?
The answer I found is:
First initialize the app into the window obj.:
window.vm = new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: {App}
})
Now you access the router anywhere with ease:
window.vm.$route
or
window.vm.$router