為什么用vuex：組件之間的作用域獨(dú)立，而組件之間經(jīng)常又需要傳遞數(shù)據(jù)，項(xiàng)目比較小的話傳遞數(shù)據(jù)還好，越大的項(xiàng)目，涉及的組件通信就越多、越頻繁，此時(shí)管理起來就會(huì)非常累，而且容易出錯(cuò)，這就是 Vuex 的意義所在。它可以將數(shù)據(jù)置于單獨(dú)的一層，并提供給外部操作內(nèi)部數(shù)據(jù)的方法。粗俗一點(diǎn)，就這樣理解吧。vuex1.0官網(wǎng)
Vuex下載
$ cnpn install vuex@1.0 --save
現(xiàn)在使用vue1.0的生態(tài)的話都要加上版本號(hào)，不是默認(rèn)都是最新版本，而vue1.0只能配合版本1來使用。
Vuex引入
接下來我們?cè)趘uex文件夾新建 store.js(初始化的 state 對(duì)象)和actions.js（定義動(dòng)作）
store.js代碼如下：
//引入相關(guān)文件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)//定義初始化變量const state = {
list:[{
name:'張三'
}],
count:0}//定義動(dòng)作const mutations = {//模仿ajax獲取新數(shù)據(jù)后 動(dòng)態(tài)更新data GETLIST (state, amount) {
state.list = amount
}, //官方例子，加減 INCREASE(state, amount){
state.count=state.count+amount
},
REDUCE(state,amount){
state.count=state.count-amount
}
}
export default new Vuex.Store({
state,
mutations
})
網(wǎng)友評(píng)論
