浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法


Posted in Javascript onJuly 24, 2020

1、在Vue项目中引用公共方法

作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量。怎么做比较好呢,话不多说直接看代码把

首先 要在main.js中引入公共js。然后,将方法赋在Vue的原型链上。

像图中这样。

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

然后在需要的组件上去引入这个方法

mouted (){
//调用方法
this.common.login();
}

/**然后公共方法里写一段简单的代码*/
export default{
login:function(){
console.log('这是一段代码')
}
}

2、Vuex中的this.$store.commit

众所周知,在vue的项目里父子组件间可以用props 或者 $emit 等方式 进行数据传递,而如果项目稍微大一点的话有很多平行组件,这个时候在这些组件间传递数据,使用这些方法会比较麻烦,代码也会变得不利于服用。

我们可以vuex来解决这个问题

vuex其实官网上不是太好理解,可以直接看看代码怎么实现的。

首先还是要先安装vuex

可以创建一个单独的store文件目录,里面专门存放相关的文件

然后新建index.js文件。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
 // 初始化全局的一个变量
 testTxt: {"tips":"这是一条vuex的数据","id":1}
 }
})
export default store

然后在main.js/main.ts 中注册store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './../store/index'

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

接下来在组件中使用

export default {
 ...
 data(){
 value : "这又是修改后的value",
 },
 computed: {
 getTxt() {
  return this.$store.state.testTxt.tips;
 }
 },
 methods: {
 modifyTxt: function() {
  this.$store.commit('modifyTips', this.value)
 }
 }
 ...
}

然后在index.js文件里可以修改

const store = new Vuex.Store({
 state: {
   // 初始化全局的一个变量
   testTxt: {"tips":"这是一条vuex的数据","id":1}
 },
  mutations: {
  modifyTips(state,msg) {
   state.testTxt.tips= msg;
  }
 }
})
export default store

当然了,vuex的版本肯定是越新越好~

以上这篇浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
javascript动画浅析
Aug 30 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
js实现模糊匹配功能
Feb 15 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
js实现小星星游戏
Mar 23 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 #Javascript
javascript实现支付宝滑块验证码效果
Jul 24 #Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 #Javascript
如何通过vscode运行调试javascript代码
Jul 24 #Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 #Javascript
js实现验证码功能
Jul 24 #Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
将python图片转为二进制文本的实例
2019/01/24 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
2014两会优秀的心得体会范文
2014/03/17 职场文书
商业融资计划书
2014/04/29 职场文书
丽江古城导游词
2015/02/03 职场文书
银行先进个人总结
2015/02/15 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
工作失职检讨书范文
2015/05/05 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
Python之matplotlib绘制折线图
2022/04/13 Python
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL