<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div>vue3.{{num}}</div>
    <div>obj{{obj.a}}</div>
    <div>
      <button @click="add">点击{{num}}</button>
    </div>
    <div>
      计算属性:{{newNum}}
    </div>
    <div>
      <button @click="route">跳转到about</button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

import { ref,watch,computed, reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,getCurrentInstance } from "vue" 
import { useStore } from "vuex"

export default {
  name: 'Home',
  props:{
    age:{
      type:'',
      default:''
    }
  }
  // components: {
  //   HelloWorld
  // }
  // setup相当于 beforeCreate和create生命周期函数
  setup() {
    const { ctx }  = getCurrentInstance()
    const store = useStore();
    const num = ref(0);
    // ref 和 reactive都是定义响应式变量，ref定义的是简单的数据类型，例如字符串、布尔、数字和数组，reactive定义的是对象类型。
    // ref定义的变量，使用是 变量.value
    // reactive定义的变量，使用的变量[属性名]
    const obj = ref({
      a:1,
      b:2
    });
    const state =  reactive({
      name: '嘻哈',
      age: 12
    });
    // 定义方法，不必再放在methods里了
    const add = () => {
      num.value++;
      console.log("state",state)
    };
    // watch监听，第一个参数是一个回调函数，返回监听的对象，第二个参数也是回调函数，做逻辑处理
    watch(
      () => num.value,
      (val,oldVal) => {
        console.log(`val:${val},oldVal:${oldVal}`)
      }
    )
    // 路由
    // 路由的话，我们实际开发中用到的是useRoute 和 useRouter，这两个方法需要引入
   // const route = useRoute();这里可以获取到路由的信息
  // const router = useRouter();这里可以用来路由跳转
  // 下面这种获取实例的方法，反正我们是不用，之前为啥这么写，那是因为之前我还没用vue3开发，在网上百度到的，可能对误解看客了。这里说声抱歉
    const route = () => {
      // 获取路由信息,传递过来的数据也在这里取
      console.log("ctx",ctx.$router)
      // ctx.$router.push({
      //   name: 'About'
      // })
      ctx.$router.push({
        path: '/about',
        // ctx.$router.currentRoute.params
        // params: {
        //   a:1,
        //   b:2
        // }
        // ctx.$router.currentRoute.query
        query: {
          a:1
        }
      })
    }
    // 计算属性
    const newNum = computed(() => num.value+2)
    // 生命周期，相当于beforeMount
    onBeforeMount(() => {
      console.log("onBeforeMount")
    })
    // 生命周期，相当于mounted
    onMounted(() => {
      console.log('onMounted');
      // vuex
      console.log("store",store)
      // 获取state
      console.log("state",store.state.sex); // state 男
      // 同步修改state
      store.commit('CHANGE_SEX','女')
      console.log("CHANGE_SEX",store.state.sex) // CHANGE_SEX 女
      // 异步修改state
      store.dispatch('changeSex','未知')
      console.log("changeSex",store.state.sex) // changeSex 未知
    })
     // 生命周期，相当于beforeUpdate
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    // 生命周期，相当于updated
    onUpdated(() => {
      console.log('onUpdated')
    })
    // 生命周期，相当于beforeDestory
    onBeforeUnmount(() => {
      console.log("onBeforeUnmount")
    })
    // 生命周期，相当于destoryed
    onUnmounted(() => {
      console.log("onUnmounted")
    })
    // 定义的变量和方法需要return出去才可以用
    return {
      num,
      add,
      obj,
      newNum,
      state,
      route
    }
  }
}
</script>
// vuex文件
import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    sex: '男'
  },
  mutations: {
    CHANGE_SEX(state,sex) {
      state.sex = sex
    }
  },
  actions: {
    changeSex({commit},data) {
      commit('CHANGE_SEX',data)
    }
  },
  modules: {
  }
});