再看那柔弱的柳树吧，在寒冬余威尚盛时节，就早早苏醒过来，望着冰冻的河面，迎着凛冽的寒风，它微微察觉出一丝春意，于是，不顾一切地率先吐翠，淡淡地披起娇黄嫩绿的新装。沿河望去，枝梢间烟纱雾彀，一片生机，这情景仿佛一首动人的歌，一首热烈向往春天的歌，一首报告春的信息的歌，一首表达美好信念的歌。我在想：既然迎春花被人称作报春花，那么，柳树可不可以叫作报春树呢春来了，万千柳枝在春风中袅袅舞动。柳树是热爱春天的，春天也是热爱柳树的。
这个问题很乌龙,但也很值得记录一下, 原因是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
}
}
}
本文详解vuex数据传输的两种方式及this.$store undefined的如何解决办法到此结束。盛夏，天热得连蜻蜓都只敢贴着树荫处飞，好像怕阳光伤了自己的翅膀。小编再次感谢大家对我们的支持！
