Rumah > Soal Jawab > teks badan
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.
P粉1949190822023-10-23 13:35:05
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
.
P粉0546168672023-10-23 11:53:45
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); } } });