快捷導(dǎo)航

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)始解析，然后解析本文件的代碼

正確的寫(xiě)法：

//  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)文章

vue使用keep-alive實(shí)現(xiàn)組件切換時(shí)保存原組件數(shù)據(jù)方法
這篇文章主要介紹了vue使用keep-alive實(shí)現(xiàn)組件切換時(shí)保存原組件數(shù)據(jù)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
對(duì)vue 鍵盤(pán)回車(chē)事件的實(shí)例講解
今天小編就為大家分享一篇對(duì)vue 鍵盤(pán)回車(chē)事件的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue3集成Element-plus實(shí)現(xiàn)按需自動(dòng)引入組件的方法總結(jié)
vue3出來(lái)一段時(shí)間了,element也更新了版本去兼容vue3,下面這篇文章主要給大家介紹了關(guān)于vue3集成Element-plus實(shí)現(xiàn)按需自動(dòng)引入組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
vscode自定義vue模板的實(shí)現(xiàn)
這篇文章主要介紹了vscode自定義vue模板的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
Vuex的安裝、搭建及案例詳解
vuex是一個(gè)專(zhuān)門(mén)為vue開(kāi)發(fā)的狀態(tài)管理工具,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),其核心是state,下面這篇文章主要給大家介紹了關(guān)于Vuex的安裝、搭建及案例的相關(guān)資料,需要的朋友可以參考下
2022-05-05
基于Vue.js的文件選擇與多選對(duì)話框組件Dccfile的使用教程
在現(xiàn)代前端開(kāi)發(fā)中,Vue.js 提供了強(qiáng)大的組件化開(kāi)發(fā)能力,使得我們可以輕松構(gòu)建復(fù)雜且可復(fù)用的用戶界面,本文將介紹一個(gè)基于 Vue.js 的文件選擇與多選對(duì)話框組件——Dccfile,并詳細(xì)解析其功能和實(shí)現(xiàn)細(xì)節(jié)
2025-04-04
Vue CLI3中使用compass normalize的方法
這篇文章主要介紹了Vue CLI3中使用compass normalize的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
vue3中ref獲取子組件的值代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中ref獲取子組件值的相關(guān)資料,在Vue3中父組件獲取子組件的值可以通過(guò)使用'ref'和'$refs'來(lái)實(shí)現(xiàn),文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
Vue通過(guò)字符串關(guān)鍵字符實(shí)現(xiàn)動(dòng)態(tài)渲染input輸入框
這篇文章主要為大家詳細(xì)介紹了Vue如何通過(guò)字符串關(guān)鍵字符實(shí)現(xiàn)動(dòng)態(tài)渲染input輸入框。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2022-12-12
VUE中使用MUI方法
在本篇文章里小編給大家分享了關(guān)于VUE中使用MUI方法和步驟，有需要的朋友們可以學(xué)習(xí)參考下。
2019-02-02