详解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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
为Extjs加加速(javascript加速)
Aug 19 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
详解React路由传参方法汇总记录
Nov 29 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
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
python合并多个excel文件的示例
2020/09/23 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
美术专业个人自我评价
2014/01/18 职场文书
优秀教师获奖感言
2014/01/31 职场文书
治安消防安全责任书
2014/07/23 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
公司合作意向书范文
2014/07/30 职场文书
就业协议书样本
2014/08/20 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
倡议书格式及范文
2015/04/29 职场文书
运动会新闻稿
2015/07/17 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书