資訊專欄INFORMATION COLUMN
摘要：寫(xiě)在前面本文旨在通過(guò)一個(gè)簡(jiǎn)單的例子，練習(xí)的幾個(gè)常用方法，使初學(xué)者以最快的速度跑起來(lái)一個(gè)的示例。生成基于的項(xiàng)目基于腳手架生成一個(gè)項(xiàng)目常用命令項(xiàng)目名進(jìn)入項(xiàng)目目錄，使用先試著跑一下。子組件可以修改父組件和自己的數(shù)據(jù)。
寫(xiě)在前面
本文旨在通過(guò)一個(gè)簡(jiǎn)單的例子，練習(xí)vuex的幾個(gè)常用方法，使初學(xué)者以最快的速度跑起來(lái)一個(gè)vue + vuex的示例。
學(xué)習(xí)vuex需要你知道vue的一些基礎(chǔ)知識(shí)和用法。相信點(diǎn)開(kāi)本文的同學(xué)都具備這個(gè)基礎(chǔ)。
另外對(duì)vuex已經(jīng)比較熟悉的大佬可以忽略本文。
生成基于vue的項(xiàng)目基于vue-cli腳手架生成一個(gè)vue項(xiàng)目
常用npm命令：
npm i vue-vli -g vue --version vue init webpack 項(xiàng)目名
進(jìn)入項(xiàng)目目錄，使用npm run dev先試著跑一下。
一般不會(huì)出現(xiàn)問(wèn)題，試跑成功后，就可以寫(xiě)我們的vuex程序了。
使用vue完成的示例使用vuex首先得安裝vuex，命令：
npm i vuex --save
介紹一下我們的超簡(jiǎn)單Demo，一個(gè)父組件，一個(gè)子組件，父組件有一個(gè)數(shù)據(jù)，子組件有一個(gè)數(shù)據(jù)，想要將這兩個(gè)數(shù)據(jù)都放置到vuex的state中，然后父組件可以修改自己的和子組件的數(shù)據(jù)。子組件可以修改父組件和自己的數(shù)據(jù)。
先放效果圖，初始化效果如下：
如果想通過(guò)父組件觸發(fā)子組件的數(shù)據(jù)，就點(diǎn)“改變子組件文本”按鈕，點(diǎn)擊后效果如下：
如果想通過(guò)子組件修改父組件的數(shù)據(jù)，就在子組件點(diǎn)擊“修改父組件文本”按鈕，點(diǎn)擊后效果如下：
代碼文件介紹首先是Parent.vue組件
這里是父組件
Test: {{msg}}
下面是Child.vue子組件
這里是子組件
childText: {{msg}}
最后是vuex的配置文件
import Vue from "vue"
import Vuex from "vuex";
Vue.use(Vuex)
const state = {
testMsg: "原始文本",
childText:"子組件原始文本"
}
const mutations = {
changeTestMsg(state, str){
state.testMsg = str;
},
changeChildText(state, str){
state.childText = str;
}
}
const store = new Vuex.Store({
state: state,
mutations: mutations
})
export default store;
后記
通過(guò)該vuex示例，了解vuex的常用配置及方法調(diào)用。希望對(duì)不怎么熟悉vuex的同學(xué)快速上手vuex項(xiàng)目有點(diǎn)幫助。
因?yàn)闆](méi)太多東西，我自己也是剛接觸，本例就不往GitHub扔了，如果嘗試了本例，但是沒(méi)有跑起來(lái)的同學(xué)，可以一起交流下。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92558.html
摘要：每一條被記錄，都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中中的異步函數(shù)中的回調(diào)讓這不可能完成因?yàn)楫?dāng)觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒(méi)有被調(diào)用，不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。 前言 之前幾個(gè)項(xiàng)目中,都多多少少碰到一些組件之間需要通信的地方,而因?yàn)榉N種原因,event bus 的成本反而比vuex還高, 所以技術(shù)選型上選用了 v...
摘要：每一條被記錄，都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中中的異步函數(shù)中的回調(diào)讓這不可能完成因?yàn)楫?dāng)觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒(méi)有被調(diào)用，不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。 前言 之前幾個(gè)項(xiàng)目中,都多多少少碰到一些組件之間需要通信的地方,而因?yàn)榉N種原因,event bus 的成本反而比vuex還高, 所以技術(shù)選型上選用了 v...
摘要：前言之前幾個(gè)項(xiàng)目中都多多少少碰到一些組件之間需要通信的地方而因?yàn)榉N種原因的成本反而比還高所以技術(shù)選型上選用了但是不知道為什么團(tuán)隊(duì)里的一些新人一聽(tīng)到就開(kāi)始退縮了因?yàn)楹茈y真的很難嗎今天我們用簡(jiǎn)單的步來(lái)證明一下有多簡(jiǎn)單純屬個(gè)人經(jīng)驗(yàn)難免有不正確的地 前言 之前幾個(gè)項(xiàng)目中,都多多少少碰到一些組件之間需要通信的地方,而因?yàn)榉N種原因,event bus 的成本反而比vuex還高, 所以技術(shù)選型上選用...
摘要：每一條被記錄，都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中中的異步函數(shù)中的回調(diào)讓這不可能完成因?yàn)楫?dāng)觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒(méi)有被調(diào)用，不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。 上一篇 vuex其實(shí)超簡(jiǎn)單,只需3步簡(jiǎn)單介紹了vuex的3步入門(mén),不過(guò)為了初學(xué)者容易消化,我削減了很多內(nèi)容,這一節(jié),就是把少掉的內(nèi)容補(bǔ)上,如果你沒(méi)看過(guò)上...
閱讀 2866·2021-10-21 09:38
閱讀 2764·2021-10-11 10:59
閱讀 3057·2021-09-27 13:36
閱讀 1673·2021-08-23 09:43
閱讀 806·2019-08-29 14:14
閱讀 3044·2019-08-29 12:13
閱讀 3213·2019-08-29 12:13
閱讀 319·2019-08-26 12:24
