vuex學習---vue2.0的生命周期

 沿用之前的vuex學習---actions 案例  介紹vue2.0的生命周期

其代碼如下：

  

<template>
  <div id="app">
     <div id="appaaa">
        <h1>這是vuex的示例</h1>
         <p>{{count}}</p>
        <p>
            <button @click = "addplus">+</button>
            <button @click = "subplus">-</button>
        </p>
        </p>

    </div>
  </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
    name:'app',
    data(){
        return {

        }
    },

    beforeCreate:function(){
        console.log("1-在初始化之后，也就是在加載完后，立即執行。在main.js中import App from './App'加載后，立即執行 " )
    },
    created:function(){
        console.log("2-創建完成");
    },
    beforeMount:function(){
        console.log("3-掛載之前 虛擬的dom已經形成，只是還沒有顯示出來")
    },
    mounted:function(){
        //這個經常使用
        console.log("4-掛載，實例被創建時執行")
    },
    //當點擊加或者減時，執行beforeUpdate updated
    beforeUpdate:function(){
        console.log("5-數據更新前")
    },
    updated:function(){
        console.log("6-數據更新")
    },
    //activated ,deactived 是在 <keep-alive></keep-alive>中使用
    activated:function(){},
    deactived:function(){},
    beforeDestroy:function(){
        console.log("9-在銷毀之前")
    },
    destroyed:function(){
       console.log("10-在銷毀之后")
    },
    computed:{
        ...mapState([
              "count"
            ])
            },
    methods:{
        ...mapActions([
            'addplus',
            'subplus'
            ])
    }
}
</script>

<style>

</style>