详解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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
Mar 10 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 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
php读取mysql的简单实例
2014/01/15 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
python爬虫爬取淘宝商品信息
2018/02/23 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python小白垃圾回收机制入门
2020/06/09 Python
windows支持哪个版本的python
2020/07/03 Python
南京迈特望C/C++面试题
2012/07/09 面试题
写自荐信要注意什么
2013/12/26 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
Node.js实现断点续传
2021/06/23 Javascript
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
HTTP中的Content-type详解
2022/01/18 HTML / CSS
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang