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專案中引用公共方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。