詳解vuex數(shù)據(jù)傳輸?shù)膬煞N方式及this.$store undefined的解決辦法
更新時(shí)間：2019年08月26日 08:26:22 作者：yizheng
這篇文章主要介紹了vuex數(shù)據(jù)傳輸?shù)膬煞N方式 及 this.$store undefined的解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
這個(gè)問(wèn)題很烏龍,但也很值得記錄一下, 原因是main.js中import store時(shí)將store的首字母寫(xiě)成了大寫(xiě).
問(wèn)題版本的如下所示:
import Store from './store'
我大概看了一下, vue似乎不支持在import部分包含帶首字母大寫(xiě)的變量,所有import進(jìn)來(lái)的對(duì)象必須要小寫(xiě),我試過(guò)把router改成Router, 發(fā)現(xiàn)路由部分也會(huì)受影響.
這種方式是典型的將vuex值及其中的方法暴露給所有的組件使用, 即將vuex視作一個(gè)"全局變量", 但vuex也可以僅提供給部分組件,即誰(shuí)想用,在誰(shuí)的script中import這個(gè)vuex對(duì)象.
第一種方式 - 將vuex提供給所有組件(即在main.js中注冊(cè))
//main.js
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
//store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
n:101
}
})
export default store
//view部分,即真正的可視化的部分, 這個(gè)任何一個(gè)組件都可以
<template>
<div>
{{ n }}
</div>
</template>
<script>
export default {
computed: {
n () {
return this.$store.state.n
}
}
}
</script>
第二種方式, 僅部分組件可使用vuex
//main.js - 去掉了store的聲明
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
//store/index.js - 這個(gè)文件和上面的一樣
//想要使用vuex數(shù)據(jù)的組件. 注意,此時(shí)$store是無(wú)效的,所以只能通過(guò)store.state.n來(lái)獲取
<template>
<div>
{{ n }}
</div>
</template>
<script>
import store from './store'
export default {
computed: {
n () {
return store.state.n
}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
最近寫(xiě)大屏,用到elementplus中的el-table,為了讓顯示效果好看一點(diǎn),需要把表格的白色背景調(diào)整為透明,與整個(gè)背景融為一體,本文給大家介紹ElementPlus表格中的背景透明解決方案,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了vue之父組件向子組件傳值并改變子組件的樣式,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3中的響應(yīng)式原理-effect，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue跨域請(qǐng)求問(wèn)題解決方案過(guò)程解析
這篇文章主要介紹了Vue跨域請(qǐng)求問(wèn)題解決方案過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
這篇文章主要介紹了Vuex的actions屬性的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue3組件間的通信方式，在使用vue時(shí)，我們經(jīng)常會(huì)把不同的模塊拆分成不同的組件，而組件之間有的需要傳遞數(shù)據(jù)，所以組件間的數(shù)據(jù)通信就非常重要了2023-04-04
vue或css動(dòng)畫(huà)實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue或css動(dòng)畫(huà)實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue如何自定義配置運(yùn)行run命令，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3輸入無(wú)效路由跳轉(zhuǎn)到指定error頁(yè)面問(wèn)題
這篇文章主要介紹了vue3輸入無(wú)效路由跳轉(zhuǎn)到指定error頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關(guān)于vue中axios封裝使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03