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>