详解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 相关文章推荐
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
Add Formatted Data to a Spreadsheet
Jun 12 Javascript
javascript 页面只自动刷新一次
Jul 10 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
jQuery实现高级检索功能
May 28 jQuery
微信小程序仿今日头条导航栏滚动解析
Aug 20 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
Smarty中调用FCKeditor的方法
2014/10/27 PHP
php实现json编码的方法
2015/07/30 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php ajax confirm 删除实例详解
2019/03/06 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
微信小程序实现星级评分和展示
2018/07/05 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python运算符重载用法实例
2015/05/28 Python
Python实现读取并保存文件的类
2017/05/11 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
交通安全责任书范本
2014/07/24 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
初中数学教学随笔
2015/08/15 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript