vuexDemo

<template> <div id="app"> <div>{{person.name}}</div> <div>{{person.age}}</div> <button @click="deleteProperty()">删除姓名（响应式）</button> <button @click="deleteProperty1()">删除姓名（非响应式）</button> </div></template><script>export default { name: 'App', data(){ return{ person:{ name:"wangjuncehn", age: 22 } } }, methods:{ deleteProperty(){ this.$delete(this.person,"name"); console.log(this.person); }, deleteProperty1(){ delete this.person.name; console.log(this.person); }, addtion(){ this.$store.commit('increament'); // this.$store.state.counter }, decreament(){ this.$store.commit('decreament'); }, addCount(count){ // 提交风格一 // this.$store.commit('increamentCount',count); // 提交风格二 this.$store.commit({ type:'increamentCount', count }) }, addStudent(){ const stu = {id:5,name:'alen',age:26}; this.$store.commit('addStudent',stu); }, changeInfo(){ this.$store.dispatch('aupdateInfo','我是payloa') }, changeName(){ // this.$store.commit("updateName",'wangjunchen'); this.$store.dispatch('updateName1',"更改完成").then((res)=>{ console.log(res); }) } }}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>