vue3.0-基本特性和用法

1. 路由配置
   vue3.0使用createRouter来创建Vue Router实例
   之前用构造函数的方式

createRouter, createWebHashHistory
const router = createRouter({
  history: createWebHashHistory(),
  [
{
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
  ]
})
export default router

2. 初始化状态
   vue3.0通过setup方法初始化状态
   调用ref()方法返回一个响应式的对象
   在setup中对ref返回的数值进行操作时，需要通过.value来获取

// value1只有一个value属性
setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    return {
      value, ienter,addValue1
    }
  }

3. 计算属性computed方法和监听器watch方法
   watch方法包含两个参数，两个参数都是function

import { ref, toRefs, computed, watch } from 'vue'

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    return {
      value, ienter,addValue1, douValue1 
    }
  }

4. 获取路由
   vue3.0通过getCurrentInstance方法获取当前组件的实例
   通过getCurrentInstance方法的ctx属性获得当前上下文
   通过计算computed获取store.state.name的值

import { ref, toRefs, computed, watch, getCurrentInstance } from 'vue'

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    const { ctx } = getCurrentInstance()
    // 当前路由信息
    // ctx.$router.currentRoute.value 
    
    return {
      value, ienter,addValue1, douValue1 
    }
  }

5. Vuex使用

import Vuex from 'vuex'
export default Vuex.createStore({
  state: {
    name: 'licky'
  },
  mutations: {
    setName(state, payload) {
      state.test.a = payload
    }
  },
  actions: {
  },
  modules: {
  }
})

setup() {
    let value1 = ref('disk')
    let ienter = () => {
      console.log(value.value);
    }
    let addValue1 = () => {
      value1.value ++
    }
    let douValue1 = computed(() => value1.value * 2)
    watch(() => value1.value, val=>{
      console.log(val)
    })
    const { ctx } = getCurrentInstance()
    // 当前路由信息
    // ctx.$router.currentRoute.value 
    
    let name = computed(() => ctx.$store.state.name)

    let editName = () => {
      ctx.$store.commit('setName', 'new Name zzz')
    }

    return {
      value, ienter,addValue1, douValue1, name, editName 
    }
  }