vuex數據傳輸的兩種方式 及 this.$store undefined的解決辦法

這個問題很烏龍,但也很值得記錄一下, 緣由是main.js中import store時將store的首字母寫成了大寫.
問題版本的以下所示:

import Store from './store'

我大概看了一下, vue彷佛不支持在import部分包含帶首字母大寫的變量,全部import進來的對象必需要小寫,我試過把router改爲Router, 發現路由部分也會受影響.

這種方式是典型的將vuex值及其中的方法暴露給全部的組件使用, 即將vuex視做一個"全局變量", 但vuex也能夠僅提供給部分組件,即誰想用,在誰的script中import這個vuex對象.

第一種方式 - 將vuex提供給全部組件(即在main.js中註冊)

//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部分,即真正的可視化的部分, 這個任何一個組件均可以
<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 - 這個文件和上面的同樣

//想要使用vuex數據的組件. 注意,此時$store是無效的,因此只能經過store.state.n來獲取
<template>
    <div>
        {{ n }}
    </div>
</template>
<script>
import store from './store'
export default {
  computed: {
    n () {
        return store.state.n
    }
  }
}