欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 搭建Vuex環(huán)境詳解

 更新時(shí)間：2021年11月15日 15:34:56   作者：TA_WORLD  
這篇文章主要為大家介紹了Vue搭建Vuex環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

搭建Vuex環(huán)境

在src目錄下創(chuàng)建一個(gè)文件夾store，在store文件夾內(nèi)創(chuàng)建一個(gè)index.js文件

index.js用于創(chuàng)建Vuex中最核心的store

//  scr/vuex/index.js
 // 引入Vuex
import Vuex from 'vuex'
 // 用于響應(yīng)組件中的動(dòng)作
const actions = {}
// 用于操作數(shù)據(jù)
const mutations = {}
// 用于存儲(chǔ)數(shù)據(jù)
const state = {}
 // 創(chuàng)建store
const store = new Vuex.Store({
    actions,
    mutations,
    state
})
 // 導(dǎo)出store
export default store

//  main.js
import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store/index'
 Vue.use(Vuex)
 new Vue({
    render:h => h(App),
    store
}).$mount('#app')

但是這樣會(huì)出現(xiàn)報(bào)錯(cuò)：

[vuex] must call Vue.use(Vuex) before creating a store instance

意思為：[vuex] 在創(chuàng)建 store 實(shí)例之前必須調(diào)用 Vue.use(Vuex)

原因：在我們導(dǎo)入store的時(shí)候，先執(zhí)行引入文件的代碼，所以在執(zhí)行以下代碼時(shí)，引入的文件已經(jīng)被執(zhí)行了

既然這樣子，那么我們交換import store from './store/index'，Vue.use(Vuex)兩行代碼

可是實(shí)際的結(jié)果是：[vuex] must call Vue.use(Vuex) before creating a store instance，依舊報(bào)錯(cuò)

原因：這是腳手架解析import語(yǔ)句的問(wèn)題，會(huì)將import引入的文件提前，放在代碼的最開(kāi)始，也是最開(kāi)始解析，然后解析本文件的代碼

正確的寫法：

//  scr/store/index.js
 // 引入Vuex和Vue
import Vuex from 'vuex'
import Vue from 'vue'
 // 應(yīng)用Vuex插件
Vue.use(Vuex)
 // 用于響應(yīng)組件中的動(dòng)作
const actions = {}
// 用于操作數(shù)據(jù)
const mutations = {}
// 用于存儲(chǔ)數(shù)據(jù)
const state = {}
 // 創(chuàng)建store
const store = new Vuex.Store({
    actions,
    mutations,
    state
})
 // 導(dǎo)出store
export default store

//  main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
 new Vue({
    render:h => h(App),
    store
}).$mount('#app')

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

最新評(píng)論