浅谈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
Oct 31 Javascript
Ext 今日学习总结
Sep 19 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
通过url查找a元素并点击
Apr 09 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
详解React之key的使用和实践
Sep 29 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
vue3中的组件间通信
Mar 31 Vue.js
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
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
根据分辩率调用不同的CSS.
2007/01/08 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
详解vue路由
2020/08/05 Javascript
JavaScript使用setTimeout实现倒计时效果
2021/02/19 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
GC是什么?为什么要有GC?
2013/12/08 面试题
《手指教学》反思
2014/02/14 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
离职证明格式样本
2015/06/12 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技