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:'<App/>',

compoents:{ App }

})

App模板中：

<template>

<div id="app">

<img src="./assets/logo.png">

{{ totalPrice }}

<apple></apple>

<banana></banana>

</div>

</template>

<script>

components:{App,Banana},

computed:{

totalPrice() {

//return this.$store.state.totalPrice

return this.$store.getters.getTotal

}

}

</script>

apple组件

<template>

<div class="hello">

<h1>{{msg}}</h1>

<button @click="addOne"> add one </button>

<button @click="minusOne"> minus one </button>

</div>

</template>

<script>

export default {

data () {

return {

msg:'i am apple',

price:5

},methods:{

addOne() {

this.$store.dispatch('increase',this.price)

},minusOne() {

this.$store.commit('minusOne',this.price)

}

}

}

}

</script>

4.参考文档

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

5.目录结构