vuex数据传输的两种方式-及-thisstore-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}
  }
}