浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

1、在Vue项目中引用公共方法

作为一个新人小白，在使用vue的过程中，难免会遇到很多的问题，比如某个方法在很多组件中都能用的上，如果在每个组件上都去引用一次的话，会比较麻烦，增加代码量。怎么做比较好呢，话不多说直接看代码把

首先 要在main.js中引入公共js。然后，将方法赋在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项目中引用公共方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue This$Store总结

    开发 VueThis$Store 一些技巧 上次答应一个读者介绍下开发此插件的一些原理和技巧,在此也一并做下总结了. 基本工具 1 正则表达式,正则表达式大家都不陌生,正则表达式的优点就是速度快,对于一个代码补全的插件,用户肯定希望更快的得到反馈,测试了 1000 行的 vue 文件匹配全部的 mapXXX() 之类的 api 字符串也只是用了 1ms 都不到的时间,但是缺点也非常明显,他是上下文无关的,比如说 mapState({ a: state => state.test, }); 这样一

  • VUEX采坑之路之获取不到$store的解决方法

    今天在写vuex的时候遇到了一个特别无语的问题,找了半个小时才找到这个问题,所以贴出来,大家在遇到和我一样的问题的时候不会太过慌张 在第一次写vuex的时候无论如何获取不到$store,后来找了好久才发现是我给全局VUE注入的时候注入的是Store而非store 这一个字母之差看上去可能没什么问题,可就是获取不到全局的$store; 代码奉上 // The Vue build version to load with the `import` command // (runtime-only o

  • 对vuex中store和$store的区别说明

    这里写自定义目录标题 <router-link to="/login">{{ $store.state.userName }}</router-link> <router-link to="/login">{{ store.state.userName }}</router-link> <router-link to="/login">{{ this.store.state.userNa

  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    1.什么是Store? 上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules. 总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法

  • 详解vuex数据传输的两种方式及this.$store undefined的解决办法

    这个问题很乌龙,但也很值得记录一下, 原因是main.js中import store时将store的首字母写成了大写. 问题版本的如下所示: import Store from './store' 我大概看了一下, vue似乎不支持在import部分包含带首字母大写的变量,所有import进来的对象必须要小写,我试过把router改成Router, 发现路由部分也会受影响. 这种方式是典型的将vuex值及其中的方法暴露给所有的组件使用, 即将vuex视作一个"全局变量", 但vuex也

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

  • 浅谈vuex中store的命名空间

    为了防止store变的过于臃肿,我们可以为store注册模块,模块默认是属于全局命名空间的,也就是说当用下列代码分发action时,任意模块只要action中有addNews,就会得到执行 this.$store.dispatch('addNews') 有时候这种情况会不是我们想要的,为此我们可以为模块指定命名空间,相当于把它封装起来,这样在像上面那样分发action,具有命名空间的模块中的addNews函数就不会执行 当然你也可以指定位于特定的命名空间中的模块执行addNews这个函数,方法如

  • 浅谈vuex的基本用法和mapaction传值问题

    vuex的理论知识就不多提了,官网上已经有明确的讲解. 用一个简单的例子来描述一下基本的用法: 第一步:npm install vuex –save-dev 第二步:在目录中创建store目录配置管理状态 //store/index.js /** * Created by zhaohuan on 2017/7/13. */ import Vue from 'vue' import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.St

  • 浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑

    前言 绝大多数网站都集成了第三方登录,降低了注册门槛,增强了用户体验.最近看了看 QQ 互联上 QQ 登录的接口文档.接入 QQ 登录的一般流程呢,是这样的:先申请开发者 -> 然后创建应用(拿到一组 AppId 和 AppKey)-> 获取 access_token -> 获取 openid -> 调用 openApi 访问或修改用户信息. 然而,从申请个人开发者开始,坑就来了. 1. 申请(个人)开发者 QQ 互联中申请开发者信息的页面,一些重点太过简陋,缺失细节,比如身份证正

  • 浅谈ASP.NET MVC 防止跨站请求伪造(CSRF)攻击的实现方法

    浅谈ASP.NET MVC 防止跨站请求伪造(CSRF)攻击的实现方法

    在HTTP POST请求中,我们多次在View和Controller中看下如下代码: 1.View中调用了Html.AntiForgeryToken(). 2.Controller中的方法添加了[ValidateAntiForgeryToken]注解. 这样看似一对的写法其实是为了避免引入跨站请求伪造(CSRF)攻击. 这种攻击形式大概在2001年才为人们所认知,2006年美国在线影片租赁网站Netflix爆出多个CSRF漏洞,2008年流行的视频网址YouTube受到CSRF攻击,同年墨西哥一

  • 浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)

    若是只引用jquery的话,监听单选按钮改变事件如下: <input type="radio" name="sex" checked="checked" value="1">男 <input type="radio" name="sex" value="2">女 $(document).ready(function() { $('input[t

  • Vue项目中如何运用vuex的实战记录

    Vue项目中如何运用vuex的实战记录

    目录 Vuex 是什么? vuex使用周期图 我的store目录 实现一个vuex的示例 总结 Vuex 是什么? TIP

  • 浅谈Vuex的状态管理(全家桶)

    浅谈Vuex的状态管理(全家桶)

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

  • 浅谈vuex 闲置状态重置方案

    前言 大型单页应用(后面都是指spa),我们往往会通过使用状态管理器 vuex 去解决组件间状态共享与状态传递等问题.这种应用少则几十个单页,多则上百个单页.随着路由的频繁切换,每个路由对应的 vuex 中的状态将越来越多.为了做到页面的极致优化,我们需要将那些闲置的状态重置,以减小占用的内存空间. 什么状态可以重置 vuex 强调采用集中式存储管理应用的所有组件的状态,但是我们真把所有的状态都放到 store 中去处理,你会发现开发起来非常痛苦.这里如果想很好的把控哪些数据需要放到 store

  • 浅谈vuex actions和mutation的异曲同工

    vuex说明: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 包含的内容: state:驱动应用的数据源: view:以生命方式将state映射到视图: actions:响应在view上的用户输入导致的状态变化: 流程示意图 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 多个视图依赖于同一状态. 来自不同视图的行为需要变更同一状态. 对于问题一,传参的方法

随机推荐