Vue当中的路由和vuex

复衡
583 阅读3分钟

Vue当中的路由和vuex

先了解一下路由和vuex

路由

Vue路由（Vue Router）提供了在Vue.js应用程序中建立客户端路由的功能。通过使用Vue路由，我们可以将不同的组件映射到应用程序的不同URL上，并且能够实现页面的异步加载、动态路由等功能。同时，它也让我们能够方便地进行页面跳转、参数传递等操作

vuex

Vuex则提供了一种集中式存储管理应用程序中所有组件的状态的方式。它使用一个全局对象（store）来存储应用程序中的所有状态，以及一些可修改状态的方法（mutations），从而保证应用程序的状态按照一定的规则发生变化。使用Vuex可以方便地跨组件共享状态，实现数据的统一管理

接下来就看代码演示

路由管理

Vue路由（Vue Router）是Vue.js官方提供的一个插件，用于实现前端单页应用（SPA）中的路由管理。Vue路由通过将页面组件映射到不同的URL路径来进行路由管理，并且可以支持嵌套路由、动态路由、路由参数、路由导航守卫等功能

  1. 安装Vue Router
npm install vue-router --save
  1. 在Vue中使用Vue Router

在main.js文件中引入Vue Router，并使用它创建一个路由实例

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  mode: 'history',
  routes // （缩写）相当于 routes: routes
})

new Vue({
  router
}).$mount('#app')
  1. 使用路由组件

在组件中使用<router-link>和<router-view>即可实现路由跳转和展示

<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>
  1. 路由传参

可以通过路由参数传递数据，在路由路径中使用:id等动态参数

// main.js
const routes = [
  { path: '/user/:id', component: User }
]

// User.vue
<template>
  <div>
    <p>User ID: {{ $route.params.id }}</p>
  </div>
</template>

以上只是一个简单的示例，实际应用中还可以使用路由守卫、异步组件等实现更多功能

Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式进行变化

  1. 安装Vuex
npm install vuex --save
  1. 在Vue中使用Vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

new Vue({
  store,
  // ...
})
  1. 在组件中使用状态

在组件中使用$store.state来访问状态，使用$store.commit()来提交mutation

<!-- App.vue -->
<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">+</button>
  </div>
</template>
  1. 使用getter获取状态

可以通过getter获取状态，并且getter会缓存计算结果，在多个组件调用时只计算一次

// Store.js
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue', done: true },
      { id: 2, text: 'Use Vuex', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    // 接受getters作为第二个参数：
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    },
    // 接受其他参数：
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})

// 组件中使用getter
computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

以上只是一个简单的示例，实际应用中还可以使用actions、modules等实现更多功能

总结

在实际开发中，Vue路由和Vuex往往会搭配使用。Vue路由负责页面的路由处理，Vuex负责处理页面间共享的状态。比如，在Vue.js中，当用户跳转到某个页面时，可以通过Vue Router来管理该页面的路由信息，同时，如果该页面需要展示某个组件的状态，可以通过调用Vuex提供的接口来获取或修改该状态。这样，就可以实现页面的无缝跳转，同时保证了应用程序数据的一致性

avatar
文章
阅读
粉丝