vue学记笔记(十九) Vue3.0之路由传参和vuex使用

Vue 之路由传参

在 vue3.0 里面使用路由必须要引入 useRouter 和 useRoute

import { useRoute, useRouter } from 'vue-router'

传递参数和获取参数

秉承谁长谁先死,Router 长 所以他负责跳转,Route 负责接收数据

function useHooks() {
  const Router = useRouter() //跳转
  const Route = useRoute() //获取到值
  const Routeid = computed(() => {
    return Route.query.id
  })
  const gotourl = () => {
    console.log('执行了')
    Router.push({
      path: '/about',
      query: {
        id: '6666',
      },
    })
  }
  return {
    gotourl,
    Routeid,
  }
}

Vue3.0 之 vuex

Vue3.0 使用 vuex 必须用 useStore,发射数据用 commit

import { useStore } from 'vuex'
const store = useStore()
store.state.content
store.commit('changeContent', e.target.value)

举例

<template>
  <div>
    <input type="text" v-model="InputContent" @change="changevalue" />
    <button @click="submitchange">提交</button>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed, reactive, toRefs } from 'vue'
  import { useStore } from 'vuex'
  export default defineComponent({
    setup() {
      const store = useStore()
      const data = reactive({
        InputContent: computed(() => {
          return store.state.content
        }),
        changevalue: (e: any) => {
          store.commit('changeContent', e.target.value)
        },
        submitchange: () => {
          const result = JSON.parse(JSON.stringify(store.state.list))
          const inputcontent = store.state.content
          let id = 0
          for (let i = 0; i < result.length; i++) {
            if (i == result.length - 1) {
              id = result[i].id + 1
            }
          }
          const item = {
            id,
            content: inputcontent,
          }
          result.push(item)
          store.commit('changeList', result)
          store.commit('changeContent', '')
        },
      })
      const result = toRefs(data)
      return {
        ...result,
      }
    },
  })
</script>

<style scoped></style>