详解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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
tab栏切换原理
Mar 22 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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
编译问题
2006/10/09 PHP
PHP中动态显示签名和ip原理
2007/03/28 PHP
坏狼php学习 计数器实例代码
2008/06/15 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
用JS实现的一个include函数
2007/07/21 Javascript
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python自带的http模块详解
2016/11/06 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
生物技术研究生自荐信
2013/11/12 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS