淺談Vuex的this.$store.commit和在Vue項(xiàng)目中引用公共方法
1、在Vue項(xiàng)目中引用公共方法
作為一個(gè)新人小白，在使用vue的過(guò)程中，難免會(huì)遇到很多的問(wèn)題，比如某個(gè)方法在很多組件中都能用的上，如果在每個(gè)組件上都去引用一次的話(huà)，會(huì)比較麻煩，增加代碼量。怎么做比較好呢，話(huà)不多說(shuō)直接看代碼把
首先 要在main.js中引入公共js。然后，將方法賦在Vue的原型鏈上。
像圖中這樣。
然后在需要的組件上去引入這個(gè)方法
mouted (){
//調(diào)用方法
this.common.login();
}
/**然后公共方法里寫(xiě)一段簡(jiǎn)單的代碼*/
export default{
login:function(){
console.log('這是一段代碼')
}
}
2、Vuex中的this.$store.commit
眾所周知，在vue的項(xiàng)目里父子組件間可以用props 或者 $emit 等方式 進(jìn)行數(shù)據(jù)傳遞，而如果項(xiàng)目稍微大一點(diǎn)的話(huà)有很多平行組件，這個(gè)時(shí)候在這些組件間傳遞數(shù)據(jù)，使用這些方法會(huì)比較麻煩，代碼也會(huì)變得不利于服用。
我們可以vuex來(lái)解決這個(gè)問(wèn)題
vuex其實(shí)官網(wǎng)上不是太好理解,可以直接看看代碼怎么實(shí)現(xiàn)的。
首先還是要先安裝vuex
可以創(chuàng)建一個(gè)單獨(dú)的store文件目錄，里面專(zhuān)門(mén)存放相關(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 }
})
接下來(lái)在組件中使用
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)目中引用公共方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了iview實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue Vine實(shí)現(xiàn)一個(gè)文件中寫(xiě)多個(gè)組件的方法(最近很火)
Vue Vine提供了全新Vue組件書(shū)寫(xiě)方式,主要的賣(mài)點(diǎn)是可以在一個(gè)文件里面寫(xiě)多個(gè)vue組件,Vue Vine是一個(gè)vite插件,vite解析每個(gè)模塊時(shí)都會(huì)觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實(shí)現(xiàn)一個(gè)文件中寫(xiě)多個(gè)組件,感興趣的朋友一起看看吧2024-07-07
下面小編就為大家分享一篇使用vue中的v-for遍歷二維數(shù)組的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中循環(huán)請(qǐng)求接口參數(shù)問(wèn)題及解決
這篇文章主要介紹了vue中循環(huán)請(qǐng)求接口參數(shù)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vuex state中的數(shù)組變化監(jiān)聽(tīng)實(shí)例
今天小編就為大家分享一篇vuex state中的數(shù)組變化監(jiān)聽(tīng)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vuejs中父子組件之間通信方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js父組件向子組件傳遞消息以及子組件向父組件傳遞消息具體操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-01-01
文章介紹了uniapp微信小程序金額展示套餐的相關(guān)內(nèi)容,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了vue 遞歸組件的簡(jiǎn)單使用示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue2 拖動(dòng)排序 vuedraggable組件的實(shí)現(xiàn)
這篇文章主要介紹了vue2 拖動(dòng)排序 vuedraggable組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
在前端vue的開(kāi)發(fā)中,有一點(diǎn)是必須要做的,那就是將所有的API接口封裝起來(lái),因?yàn)閺拈_(kāi)發(fā)到最終上線(xiàn)的過(guò)程中,API是需要經(jīng)常更換的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目API接口封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09