浅谈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 相关文章推荐
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
jQuery find和children方法使用
Jan 31 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
vue+Element-ui实现分页效果
Nov 15 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/11/16 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
草船借箭教学反思
2014/02/03 职场文书
公司寄语大全
2014/04/10 职场文书
Python if else条件语句形式详解
2022/03/24 Python