建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
vuex中出現(xiàn)this.$storeundefined怎么辦
小編給大家分享一下vuex中出現(xiàn)this.$store undefined怎么辦，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比紅山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式紅山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋紅山地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。
這個(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è)組件都可以{{ n }}
第二種方式, 僅部分組件可使用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來獲取{{ n }}<dd id="yfvws"></dd>