vuex icon indicating copy to clipboard operation
vuex copied to clipboard

Access globalProperties in store

Open HippolyteQuief opened this issue 3 years ago • 6 comments

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 ?

HippolyteQuief avatar Nov 19 '21 10:11 HippolyteQuief

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?

LinusBorg avatar Nov 19 '21 10:11 LinusBorg

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.

HippolyteQuief avatar Nov 19 '21 13:11 HippolyteQuief

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.

LinusBorg avatar Nov 19 '21 13:11 LinusBorg

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".

thiagosantos avatar Nov 20 '21 01:11 thiagosantos

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

AQAMINE avatar May 12 '22 16:05 AQAMINE

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

  1. I cant just call useHttpHandler(app) because I need app to be defined
  2. 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

mjones2620 avatar Jul 25 '22 16:07 mjones2620