``` <div id="app"> {{msg}} <a href="javascript:;" @click="edit"> 點擊</a> <conter></conter> </div> <script> const conter={ data(){ return { mm:" count" } }, template:` <div> {{mm}} :{{count}} <br> name :{{name}} <br> age : {{age}} <br> preName : {{preName}} </div> `, computed:{ count(){ return this.$store.state.count; }, name(){ return this.$store.state.name }, age(){ return this.$store.state.age; }, preName(){ return this.$store.getters .preName } } } const store = new Vuex.Store({ state:{ count:0, name:"nil", age:0 }, mutations:{ increment(state){ state.count++; }, editName(state,newName){ state.name=newName; }, addAge(state,num){ state.age=num; } }, getters:{ preName(state){ return "china " +state.name } }, actions:{ addAgeAction(context,num){ context.commit("addAge",num); } } }); new Vue({ el:"#app", store, data:{ msg:"Vuex 的使用", }, methods:{ edit(){ this.$store.commit("increment"); this.$store.commit("editName","cpj"); this.$store.dispatch("addAgeAction",'22') }, }, components:{ conter } }) </script> </body> ```