這個問題很烏龍,但也很值得記錄一下, 原因是main.js中import store時將store的首字母寫成了大寫.
問題版本的如下所示:
import Store from './store'
我大概看了一下, vue似乎不支持在import部分包含帶首字母大寫的變量,所有import進來的對象必須要小寫,我試過把router改成Router, 發現路由部分也會受影響.
這種方式是典型的將vuex值及其中的方法暴露給所有的組件使用, 即將vuex視作一個"全局變量", 但vuex也可以僅提供給部分組件,即誰想用,在誰的script中import這個vuex對象.
第一種方式 - 將vuex提供給所有組件(即在main.js中注冊)
//main.jsimport 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 = falseVue.use(ElementUI)new Vue({ router, store, render: h => h(App)}).$mount('#app')//store/index.jsimport Vue from "vue";import Vuex from "vuex";Vue.use(Vuex); const store = new Vuex.Store({ state: { n:101 }})export default store//view部分,即真正的可視化的部分, 這個任何一個組件都可以<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 = falseVue.use(ElementUI)new Vue({ router, render: h => h(App)}).$mount('#app')//store/index.js - 這個文件和上面的一樣//想要使用vuex數據的組件. 注意,此時$store是無效的,所以只能通過store.state.n來獲取<template> <div> {{ n }} </div></template><script>import store from './store'export default { computed: { n () { return store.state.n } }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
