浅谈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 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
jquery实现页面常用的返回顶部效果
Mar 04 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
js实现小球在页面规定的区域运动
Jun 16 Javascript
js+canvas实现五子棋小游戏
Aug 02 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
数据库的日期格式转换
2006/10/09 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
vue的for循环使用方法
2019/02/12 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python逆序打印各位数字的方法
2018/06/25 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
计算机专业应届毕业生自荐信
2013/09/26 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
临床医师个人自我评价
2014/04/06 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
个人股份合作协议书
2014/10/24 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
创业计划书之校园超市
2019/09/12 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
python游戏开发Pygame框架
2022/04/22 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python