详解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 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
jQuery获取多种input值的简单实现方法
Jun 20 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
JavaScript实现雪花飘落效果
Dec 27 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的FTP学习(四)
2006/10/09 PHP
header()函数使用说明
2006/11/23 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP重载基础知识回顾
2020/09/10 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
3种vue组件的书写形式
2017/11/29 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
Python实现大文件排序的方法
2015/07/10 Python
Python实现注册登录系统
2017/08/08 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
如何真正的了解python装饰器
2020/08/14 Python
python rsa-oaep加密的示例代码
2020/09/23 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
毕业生自荐书
2013/12/18 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js