vue之vuex
阿新 • • 發佈:2018-01-22
ins store vue vuex efault get tor 提交 highlight
vuex負責vue的數據管理和共享,適用於大型項目
安裝vuex
npm install vuex --save;
運用vuex
主要有五大金剛:
export default new Vuex.Store({//$store為了讓外部可以引用 state,//數據存儲 mutations,//行為動作 actions,//異步改變state狀態,也就是提交mutations的一些修改 $store.commit(‘things‘) getters//獲取屬性進行操作 })
簡單編寫
const state={ count:1, bin:{ names:‘chen‘ } } const mutations={ add(state){ this.state.count+=1 }, reduce(state){ this.state.count-=1 } } const actions={ } const getters={ }
模塊類型編寫
模塊封裝 const moduleA={ state:{ count:0, }, mutations:{ add(state){ this.state.a.count+=100 }, reduce(state){ this.state.a.count-=100 } }, actions:{} } const moduleB={ state:{}, mutations:{}, actions:{} } export default new Vuex.Store({ modules:{ a:moduleA, b:moduleB } })
vue之vuex