浅谈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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
Extjs 几个方法的讨论
2010/01/28 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
关于express与koa的使用对比详解
2018/01/25 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
学习python需要有编程基础吗
2020/06/02 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
简历中自我评价分享
2013/10/09 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
个人自我剖析材料
2014/09/30 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2014年教研室工作总结
2014/12/06 职场文书
大四学生个人总结
2015/02/15 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
详解Python中__new__方法的作用
2022/03/31 Python
MySQL导致索引失效的几种情况
2022/06/25 MySQL