vue之vuex

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}
})

? 頁面渲染數據和事件

<button onClick={this.$store.commit(reduce)}><button>
<button>this.$store.state.count<button>
<button onClick={this.$store.commit(add)}><button>

?