vue3中router和store详细使用教程方法

最新推荐文章于 2025-04-03 20:34:04 发布

原创最新推荐文章于 2025-04-03 20:34:04 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #开发语言

Vue3中使用路由和状态管理的方法与Vue2类似，但是有一些细节上的变化。下面是路由和状态管理的详细使用教程：

安装Vue Router和Vuex

在使用Vue Router和Vuex之前，需要先安装它们。可以使用npm或yarn进行安装：

npm install vue-router vuex --save
# 或者
yarn add vue-router vuex

创建路由实例

在创建Vue应用之后，需要创建一个Vue Router实例并将其挂载到根Vue实例上。在Vue3中，使用createRouter函数创建路由实例，然后通过app.use()方法将其挂载到根Vue实例上。例如：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})

const app = createApp(App)

app.use(router)

app.mount('#app')

在createRouter函数中，需要传递一个history参数和一个routes参数。history参数指定路由模式，可以使用createWebHistory来使用HTML5历史路由模式，也可以使用createWebHashHistory来使用哈希路由模式。routes参数是一个数组，用于定义路由映射表。

定义路由映射表

路由映射表用于定义路由地址和组件之间的对应关系。在Vue3中，路由映射表的定义方式与Vue2相同，但是需要使用新的API。例如：

import { defineAsyncComponent } from 'vue'
import Home from './views/Home.vue'
const About = defineAsyncComponent(() => import('./views/About.vue'))

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

在上面的例子中，使用了defineAsyncComponent函数来定义异步加载的组件。这是Vue3新增的API，用于提高应用的性能。

创建Vuex实例

Vuex是Vue的官方状态管理库，用于管理应用的状态。在Vue3中，使用createStore函数创建Vuex实例。例如：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})

在createStore函数中，需要传递一个包含state、mutations、actions等属性的对象。state属性用于定义应用的状态，mutations属性用于定义修改状态的方法，actions属性用于定义异步操作。

将Vuex实例挂载到根Vue实例上

在创建完Vuex实例之后，需要将其挂载到根Vue实例上。与Vue2相同，可以使用app.use()方法将其挂载到根Vue实例上。例如：

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
  state: {...},
  mutations: {...},
  actions: {...},
})

const app = createApp(App)

app.use(store)

app.mount('#app')

在组件中使用路由和Vuex

在Vue3中，使用路由和Vuex的方法与Vue2相同。可以使用$router和$route访问路由信息，使用$store访问Vuex实例。例如：

<template>
  <div>
    <h1>{{ $route.path }}</h1>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
    <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
  </div>
</template>