vue3.0学习笔记5---vue-router和vuex的使用

vue-router的使用

• 导入vue-router

npm install vue-router@next --save

• 编写router.ts文件

import {createRouter, createWebHistory} from 'vue-router'
import Login from "@/pages/Login.vue";

const routerHistory = createWebHistory()

const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            name: 'login',
            component: Login
        },
    ]
})

export default router

• main.ts内导入路由

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";

const app = createApp(App)
app.use(router)
app.mount('#app')

• app.vue内使用路由

<template>
  <div class="container-fluid">
    <GlobalHeader :user="user"></GlobalHeader>
    <router-view></router-view>
    <footer class="navbar fixed-bottom navbar-light bg-light">
      <a class="navbar-brand" href="#">作者：陈昭良</a>
    </footer>
  </div>
</template>

• 路由跳转

静态路由跳转，在router-link标签内写:to属性，即可跳转

      <li class="list-inline-item"><router-link class="btn btn-outline-light my-2" :to="{name: 'login'}">登录</router-link></li>
      <li class="list-inline-item"><router-link class="btn btn-outline-light my-2" :to="{name: 'login'}">注册</router-link></li>

动态路由跳转

import {useRouter} from "vue-router";
const router = useRouter()
const onFormSubmit = (value: boolean) => {
 if (value) {
   router.push({name: 'home'})
 }
}

vuex的使用

• 安装vuex

npm install vuex@next --save

• 编写store.ts文件，存放一些全局对象

import {createStore} from 'vuex'

const store = createStore({
    state: {
        user: {isLogin: false}
    },
    mutations: {

    }
})


export default store;

• main.ts中导入vuex

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

• 调用，采用commit方法

import {useStore} from "vuex";


const store = useStore()
const onFormSubmit = (value: boolean) => {
  if (value) {
    store.commit('updateUser', {isLogin: true, name: '陈昭良', id: 1})
    router.push('/')
  }
}

响应式的展示

import {useStore} from "vuex";
const store = useStore()
const user = computed(() => store.state.user)
return {
  user
}