Accéder aux instances Vue dans Vuex : un guide étape par étape

Question

J'ai déclaré une variable globale dans main.js de mon projet Vue.js.

Vue.prototype.$API = "myapihere"

Je veux l'utiliser partout. Cela fonctionne bien avec this.$API.

Mais dans Vuex, cela ne fonctionne pas.

console.log(this.$API);

Ici this.$API est undéfini.

Comment utiliser mon $API dans Vuex.

Answer 1

J'utilise Vue 3 et Vue.prototype.$foo 似乎已在此版本中删除。我还发现在我的 VueX 版本中没有 this._vm.

J'ai exploré la méthode Provide / Inject, qui est fournie par la documentation de Vue 3. Cela fonctionne très bien pour accéder aux variables globales depuis mon composant, mais je ne peux pas y accéder depuis le magasin.

La solution que je recherche est d'utiliser les propriétés d'objet et standard sur les globalProperties store de Vue et de les définir avant d'installer l'application.

main.js：

import store from './store/index';
import App from './App.vue';

// Load custom globals
import conf from '@/inc/myapp.config';

const app = createApp(App)
  .use(store);

// Register globals in app and store
app.config.globalProperties.$conf = conf;
store.$conf = conf;

app.mount('#app');

Ce que j'aime, c'est que je peux accéder aux variables globales de la même manière dans le stockage et les composants.

En composante :

export default {
  data() {
    return {
    };
  },
  created() {
    console.log( this.$conf.API_URL );
  },
}

...vous pouvez accéder à this.$conf.API_URL de la même manière via des opérations, des mutations et des getters.

Une fois que j'ai trouvé cette solution, je n'ai plus besoin d'accéder à l'intégralité de l'instance Vue depuis le magasin, mais si vous en avez besoin pour une raison quelconque, vous pouvez attribuer store.$app = app; en store.$app = app;在 main.js.

Answer 2

Réponses Vue 2 et Vuex 3

L'instance vue est accessible dans le magasin en accédant à this._vm

const store = new Vuex.Store({
  mutations: {
    test(state) {
      console.log(this._vm);
    }
  }
});