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


Posted in Javascript onAugust 26, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 继承详解 第一篇
Aug 30 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
JavaScript 异步调用
Oct 25 Javascript
JS阻止事件冒泡的方法详解
Aug 26 #Javascript
express框架中使用jwt实现验证的方法
Aug 25 #Javascript
JS异步处理的进化史深入讲解
Aug 25 #Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 #Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 #Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 #Javascript
angularjs自定义过滤器demo示例
Aug 24 #Javascript
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
2017/02/23 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python查找相似单词的方法
2015/03/05 Python
基于Python List的赋值方法
2018/06/23 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Django stark组件使用及原理详解
2019/08/22 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
技校学生个人职业生涯规划范文
2014/03/03 职场文书
青春无悔演讲稿
2014/05/08 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
中秋节感想
2015/08/10 职场文书
七年级生物教学反思
2016/02/20 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
如何Python使用re模块实现okenizer
2022/04/30 Python