vuex
vuex copied to clipboard
Access globalProperties in store
What problem does this feature solve?
We should be able to access the globalProperties or the Vue instance in the store.
For exemple, I add a custom axios to my globalProperties app.config.globalProperties.$axios = axios
. In a mutation, I want to get some values by calling my custom axios defined in globalProperties and add them in a state.
What does the proposed API look like?
In vuex 3, used to have _vm in the store, so why not do something similar ?
So in Vuex 3 you used a private property to do something that was not a feature?
Why is a simple import of the axios instance not desirable?
Well, I never use Vuex 3 before, I'm new in Vue actually, I just saw in some forum that it was possible to access the Vue instance through this._vm
in a store.
I took axios as an exemple, but in reality I created a custom plugin where i define some functions and data like app.config.globalProperties.$myVar = ....
and I would to use them in my stores. The problem is this kind of properties are only usable in a component.
Yeah. But nothing stops you from defining the content for $myVar
in its own file, and then import that into main.js to add as a globalProperty, as well as into your store file.
You may be interested in how Buefy solved this "global Vue" problem, they simply in the install method when they receive the Vue instance they set as a global with setVueInstance(Vue) line 11 and export the Vue instance as VueInstance here
So, inside your store module, you can import this "VueInstance".
you can use
store.$axios = axios;
you can access it by this.$axios
you can also use
window.axios = require('axios');
you can access it by window.axios
Sorry I'm late to the party, but I also have run into this issue and can't seem to solve this in Pinia without doing some sort of undesired factory pattern.
I have a custom implementation of an axios api handler I've defined as a global property of $http - this needs access to the app instance to gain access to another global property I've defined as $Progress. I have a pinia store defined as lookupStore - where in one of my actions I would like to call the api handler, but I can't because I can't seem to gain access to the app global properties.
Two issues
- I cant just call useHttpHandler(app) because I need app to be defined
- I can't just call this.$http because
this
is not the app instance, it's the instance of pinia
This all seemed much simpler in Vue 2, and Vuex. I'm trying to stick with it and get into Vue 3 with Pinia, but it seems overly complicated to do things that were somewhat straight forward in Vue 2 and Vuex. Let me know if I'm just missing the mark completely.
Thanks