详解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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
轮播的简单实现方法
Jul 28 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 Javascript
React实现todolist功能
Dec 28 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP实现电商订单自动确认收货redis队列
2017/05/17 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
React中的refs的使用教程
2018/02/13 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
Python使用剪切板的方法
2017/06/06 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
德国自行车商店:Tretwerk
2019/06/21 全球购物
Cocopanda波兰:购买化妆品、护肤品、护发和香水
2020/05/25 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
怎样写留学自荐信
2013/11/11 职场文书
学历公证书范本
2014/04/09 职场文书
竞赛口号大全
2014/06/16 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python