1.vuex安装

npm install vuex --save

2.vuex应用实例

import Vue from 'vue'
import App from './App'
import router from './Router'
import Vuex from 'vuex'

Vue.use(Vuex);

let store=new Vuex.store({
	state:{
		totalPrice:0
	},
	getters:{
		getTotal(state){
			return state.totalPrice
		}
	},
	mutations:{
		increment(state,price){
			state.totalPrice+=price
		},
		decrement(state,price){
			state.totalPrice-=price
		}
	},
	actions:{
		increment(context,id){
			//context.commit('increment',price)
			api(id,function(price)){ //异步
				context.commit('increment',price)
			}
		},
		decrement(state,price){
			state.totalPrice-=price
		}
	}
})
new Vue({
	el:'#app',
	router:router,
	store,
	template:'<App/>',
	components:{
		App
	},
	render: h=> h(App)
})

<template>
	<div>
		{{hello}}
		<router-view name="viewA"></router-view>
		<button @click="getParams">获取参数</button>
		{{$route.params.id}}
		<h1>{{ msg }}</h1>
		<button @click="addOne">add one</button>
		<button @click="minusOne">minus one</button>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				hello: 'i am component a',
				price:5
			}
		},
		methods:{
			getParams (){
				console.log(this.$route.params)
			},
			addOne (){
				//this.$store.commit('increment',this.price)
				this.$store.dispatch('increment',this.price)
			},
			minusOne () {
				//this.$store.commit('decrement',this.price)
				this.$store.dispatch('decrement',this.price)
			}
		}
	}
</script>

<style>
</style>