详解vuex数据传输的两种方式及this.$store undefined的解决办法

2019-11-19 10:58:38

字体：大中小

来源：转载

供稿：网友

这个问题很乌龙,但也很值得记录一下, 原因是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  } }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：vue移动端实现手机左右滑动入场动画

下一篇：JS阻止事件冒泡的方法详解