-
vueX適用于多組件間的狀態(tài)共享
查看全部 -
應(yīng)用場(chǎng)景
多個(gè)視圖依賴于統(tǒng)一狀態(tài)
來(lái)自不同視圖的行為需要改變同一個(gè)狀態(tài)
查看全部 -
store的getter類似computer屬性
查看全部 -
做分享的事件時(shí)，需要修改會(huì)員狀態(tài)，把這個(gè)事情放到store的action中去寫，而不在業(yè)務(wù)頁(yè)面的分享動(dòng)作里直接去寫狀態(tài)值修改，會(huì)顯得邏輯比較清晰，利于維護(hù)。
查看全部 -
vuex安裝
查看全部 -
vuex的組成介紹
查看全部 -
vuex用于復(fù)雜 單頁(yè)面應(yīng)用，中大型，不適合簡(jiǎn)單查看全部
-
vuex的組成介紹
查看全部 -
state 數(shù)據(jù)庫(kù)，getter獲取數(shù)據(jù)查看全部
-
安裝vuex：npm install vuex
創(chuàng)建實(shí)例：new Vuex.store()
main.js中將vuex實(shí)例掛載到vue對(duì)象上
查看全部 -
State --數(shù)據(jù)倉(cāng)庫(kù)，所有的數(shù)據(jù)都存儲(chǔ)于state中，數(shù)據(jù)唯一源，屬于 json 對(duì)象
getter --用來(lái)獲取數(shù)據(jù)的
Mutation -- 用來(lái)修改數(shù)據(jù)的，數(shù)據(jù)一定要同步的
Action --用來(lái)提交mutation數(shù)據(jù)，可以異步提交
查看全部 -
在main.js中寫入
new Vuex.Store({
state:{count:0},
mutations{
conuntIncreaseP(state){
state.count++
}
}
}}
【通過(guò)兩種方式獲取，store實(shí)列獲取，通過(guò)mutation獲取】
{{ this.$store.state.count}}
【通過(guò)點(diǎn)擊事件改變count】
<button> @click="countcrease">點(diǎn)擊我</button>
methods{
countcrease（）{
this.$store.commit('conuntIncreaseP')
}
}
【mutation 的傳值】
new Vuex.Store({
state:{count:0},
mutations{
conuntIncreaseP(state,value){
state.count = value;
}
}
}}
====
methods{
countcrease（）{
this.$store.commit('conuntIncreaseP',100)
}
}
查看全部 -
通過(guò)vue-cli來(lái)創(chuàng)建項(xiàng)目
vue create vuex-deme --default(默認(rèn))
npm install vuex 或者yarn add vuex
在main.js文件寫入
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
?state:{
?????count:0
?}
})
new Vue({
store,
render:h=>h(App)
}).$mount("#app")
npm run server 或者yarn server
查看全部 -
Vuex install
npm install vuex
new Vuex.store()--創(chuàng)建實(shí)列?
將main.js中將vuex實(shí)例掛載到vue對(duì)象
查看全部 -
【VueX 組成】
State --數(shù)據(jù)倉(cāng)庫(kù)
getter --用來(lái)獲取數(shù)據(jù)的
Mutation -- 用來(lái)修改數(shù)據(jù)的
Action --用來(lái)提交mutation
查看全部
舉報(bào)