浅谈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 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
javascript中var的重要性分析
Feb 11 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
Angular 作用域scope的具体使用
Dec 11 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
Vue实现数据请求拦截
Oct 23 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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
PHP概述.
2006/10/09 PHP
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
详解vue中使用微信jssdk
2019/04/19 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
python 全局变量的import机制介绍
2017/09/07 Python
python 实现A*算法的示例代码
2018/08/13 Python
python获取url的返回信息方法
2018/12/17 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
应届大学生求职信
2013/12/01 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
岗位聘任书范文
2014/03/29 职场文书
《泉水》教学反思
2014/04/11 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
广播体操口号
2014/06/18 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
工程主管竞聘书
2015/09/15 职场文书
导游词之凤凰古城
2019/10/22 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python