淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法

更新時(shí)間：2020年07月24日 09:36:13 作者：無影尊者

這篇文章主要介紹了淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

1、在Vue項(xiàng)目中引用公共方法

作為一個(gè)新人小白，在使用vue的過程中，難免會(huì)遇到很多的問題，比如某個(gè)方法在很多組件中都能用的上，如果在每個(gè)組件上都去引用一次的話，會(huì)比較麻煩，增加代碼量。怎么做比較好呢，話不多說直接看代碼把

首先要在main.js中引入公共js。然后，將方法賦在Vue的原型鏈上。

像圖中這樣。

然后在需要的組件上去引入這個(gè)方法

mouted (){
//調(diào)用方法
this.common.login();
}

/**然后公共方法里寫一段簡單的代碼*/
export default{
login:function(){
console.log('這是一段代碼')
}
}

2、Vuex中的this.$store.commit

眾所周知，在vue的項(xiàng)目里父子組件間可以用props 或者 $emit 等方式進(jìn)行數(shù)據(jù)傳遞，而如果項(xiàng)目稍微大一點(diǎn)的話有很多平行組件，這個(gè)時(shí)候在這些組件間傳遞數(shù)據(jù)，使用這些方法會(huì)比較麻煩，代碼也會(huì)變得不利于服用。

我們可以vuex來解決這個(gè)問題

vuex其實(shí)官網(wǎng)上不是太好理解,可以直接看看代碼怎么實(shí)現(xiàn)的。

首先還是要先安裝vuex

可以創(chuàng)建一個(gè)單獨(dú)的store文件目錄，里面專門存放相關(guān)的文件

然后新建index.js文件。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
 // 初始化全局的一個(gè)變量
 testTxt: {"tips":"這是一條vuex的數(shù)據(jù)","id":1}
 }
})
export default store

然后在main.js/main.ts 中注冊(cè)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: {
   // 初始化全局的一個(gè)變量
   testTxt: {"tips":"這是一條vuex的數(shù)據(jù)","id":1}
 }，
  mutations: {
  modifyTips(state,msg) {
   state.testTxt.tips= msg;
  }
 }
})
export default store

當(dāng)然了，vuex的版本肯定是越新越好~

以上這篇淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: