小編給大家分享一下vuex中出現(xiàn)this.$store undefined怎么辦，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)公司是一家專業(yè)提供會(huì)昌企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、H5頁面制作、小程序制作等業(yè)務(wù)。10年已為會(huì)昌眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

這個(gè)問題很烏龍,但也很值得記錄一下, 原因是main.js中import store時(shí)將store的首字母寫成了大寫.

問題版本的如下所示:

import Store from './store'

我大概看了一下, vue似乎不支持在import部分包含帶首字母大寫的變量,所有import進(jìn)來的對(duì)象必須要小寫,我試過把router改成Router, 發(fā)現(xiàn)路由部分也會(huì)受影響.

這種方式是典型的將vuex值及其中的方法暴露給所有的組件使用, 即將vuex視作一個(gè)"全局變量", 但vuex也可以僅提供給部分組件,即誰想用,在誰的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是無效的,所以只能通過store.state.n來獲取
<template>
  <div>
    {{ n }}
  </div>
</template>
<script>
import store from './store'
export default {
 computed: {
  n () {
    return store.state.n
  }
 }
}

看完了這篇文章，相信你對(duì)“vuex中出現(xiàn)this.$store undefined怎么辦”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

新聞名稱：vuex中出現(xiàn)this.$storeundefined怎么辦-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://chinadenli.net/article26/doijcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、軟件開發(fā)、微信小程序、微信公眾號(hào)、服務(wù)器托管、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)