//  scr/vuex/index.js
 // 引入Vuex
import Vuex from 'vuex'
 // 用于響應(yīng)組件中的動作
const actions = {}
// 用于操作數(shù)據(jù)
const mutations = {}
// 用于存儲數(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')

但是這樣會出現(xiàn)報錯：

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

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

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

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

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

原因：這是腳手架解析import語句的問題，會將import引入的文件提前，放在代碼的最開始，也是最開始解析，然后解析本文件的代碼

正確的寫法：

//  scr/store/index.js
 // 引入Vuex和Vue
import Vuex from 'vuex'
import Vue from 'vue'
 // 應(yīng)用Vuex插件
Vue.use(Vuex)
 // 用于響應(yīng)組件中的動作
const actions = {}
// 用于操作數(shù)據(jù)
const mutations = {}
// 用于存儲數(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')