Vuex状态管理

1.组件共用Store修改state更新到组件

---

2.原理图

---

3.代码

import Vuex from 'Vuex'

Vue.use(Vuex)

let store = new Vuex.store({

state:{

totalPrice:0

},

getters:{

getTotal(state){

return state.totalTotal

}

},

mutations:{

increment (state,price) {

state.totalPrice +=price

},

decrement(state,price){

state.totalPrice -=price

}

},actions:{

increase(context,id) {

api(id,function(price){

context.commit('increment',this.price)

})

}

}

})

new Vue({

el:'#app',

store,

template:'',

compoents:{ App }

})

App模板中：

apple组件

4.参考文档

https://vuex.vuejs.org/zh-cn/intro.html

5.目录结构