Mengakses tika Vue dalam Vuex: panduan langkah demi langkah

Question

Saya mengisytiharkan pembolehubah global dalam main.js projek Vue.js saya.

Vue.prototype.$API = "myapihere"

Saya mahu menggunakannya di mana-mana. Ia berfungsi dengan baik menggunakan this.$API.

Tetapi dalam Vuex ia tidak berkesan.

console.log(this.$API);

Di sini this.$API adalah tidak ditentukan.

Bagaimana saya menggunakan $API saya dalam Vuex.

Answer 1

Saya menggunakan Vue 3 dan Vue.prototype.$foo 似乎已在此版本中删除。我还发现在我的 VueX 版本中没有 this._vm.

Saya meneroka kaedah Provide / Inject, yang disediakan oleh dokumentasi Vue 3. Ini berfungsi hebat untuk mengakses pembolehubah global dari dalam komponen saya, tetapi saya tidak boleh mengaksesnya dari dalam kedai.

Penyelesaian yang saya cari ialah menggunakan objek dan sifat standard pada globalProperties store Vue dan tetapkannya sebelum memasang apl.

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');

Apa yang saya suka tentang ini ialah saya boleh mengakses pembolehubah global dengan cara yang sama dalam storan dan komponen.

Dalam komponen:

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

...anda boleh mengakses this.$conf.API_URL dengan cara yang sama melalui operasi, mutasi dan getter.

Setelah saya menemui penyelesaian ini, saya tidak lagi perlu mengakses keseluruhan contoh Vue dari dalam kedai, tetapi jika anda memerlukannya atas sebab tertentu, anda boleh menetapkan store.$app = app dalam kedudukan yang sama dalam store.$app = app;在 main.js.

Answer 2

Jawapan Vue 2 dan Vuex 3

Instance vue boleh diakses di kedai dengan mengakses this._vm

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