0


Vue8-Vuex与Router

Vuex

概述

  1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。---- 工具,用于管理应用中组件间共享的状态(数据)
  2. 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

概念

  1. store:仓库,用于集中式管理
  2. state:状态,应用中组件要共享的数据
  3. mutation:同步更新状态数据的函数,在 vuex 中仅能提交 mutation 来更新状态数据
  4. action:和 mutation 类似,但可以包含异步操作,不能直接更新状态,而是要提交 mutation 更新
  5. getter:是 store 中的计算属性
  6. module:模块,每个模块可以有自己的 state、mutation、action、getter,甚至自己的 module

使用

  1. 安装
  1. 创建 Store
import Vue from'vue'import Vuex from'vuex'// 使用核心插件 Vuex
Vue.use(Vuex)// 创建 Storeconst store =newVuex.Store({state:{// 组件间共享的数据todos:[],},mutations:{// 唯一进行同步更新状态数据的方法/**
     * 添加新待办事项
     */addTodoItem(state, payload){
      state.todos.push({id: Math.random(),title: payload.title,completed:false,})},},})exportdefault store

向根实例中注入 store

import Vue from'vue'// 引入 storeimport store from'./store'// import store from './store/index.js'newVue({
  store,// 注入 store,这样,在所有后代组件中,都可以使用 this.$store 获取 vuex 的 Store 使用// render: h => h(App),}).$mount('#app')

在组件中使用 store

  1. this.$store.state.todos // 类似于data拿里面数据
  2. this.$store.commit(mutationType, payload) // 类似于触发事件
  3. this.$store.getters.allChecked // 类似于计算属性

辅助函数

import{ mapState, mapGetters, mapMutations, mapActions }from'vuex'// 解构出来vuex仓库中保存的数据

Vue Router

SPA

single page application(单页面应用程序),即在整个应用中,只有一个 html 页面,在用户与应用之间实现交互时能够动态更新页面内容。

前端路由

利用 hash 或 history 改变不会向后端发起新的 html 请求

模式

  1. hash:利用 URL 中 #hash hash 值改变后,不会发送新的网络请求的特点,来实现的路由。使用如 #/home、#/login 类似的方式来表示所请求的前端 URL 资源
  2. history:利用 h5 中 history 新增的 API pushState()、replaceState() 来实现。其路由的格式与服务端路由 URL 格式一致(比 hash 模式来说,没有多余的如 # 之类的符号),这种路由模式要用好,还需要服务端配置
  3. Vue Router是 Vue.js 官方的路由管理器,是一个核心插件,与 Vue.js 高度集成

安装

定义 VueRouter 对象

import Vue from'vue'import VueRouter from'vue-router'import Home from'@/views/Home'import Login from'@/views/Login'// 使用路由插件
Vue.use(VueRouter)// 创建 VueRouter 对象const router =newVueRouter({mode:'hash',// 路由模式,可取 hash、history,默认为 hashroutes:[// 静态路由的配置信息{path:'/home',// 当 URL 中访问地址为 /home 时component: Home,// 拿 Home 组件渲染},{path:'/login',component: Login,},],})// 导出路由对象exportdefault router

在 Vue 组件中使用 VueRouter 时,可使用 VueRouter 提供的两个内置组件:

  1. router-link:链接,相当于
  2. router-view:视图,用于渲染访问路径所对应的组件
  3. 注入 router 到 vue 根实例
// 引入 routerimport router from'./router'newVue({
  router,// render: h => h(App),}).$mount('#app')
  1. 当在 Vue 根实例中注入了 router 后,在 vue 组件中会自动注入如下两个属性:
  • $router:代表 VueRouter 对象实例
  • $route:代表的是当前激活的路由对象
<template><divclass="app"><router-linkto="/index">首页</router-link><button@click="singinHandle">切换登录</button><router-view/></div></template><script>exportdefault{name:'App',created(){this.$watch(()=>this.$route.params,(toParams, previousParams)=>{
        console.log(this.$route)// 对路由变化做出响应...})},methods:{singinHandle(){// this.$router.push({//   path: '/signin'// })this.$router.push({path:'/singin',query:{id:1}})}}}</script><stylelang="less"scoped></style>

本文转载自: https://blog.csdn.net/weixin_64925940/article/details/124802971
版权归原作者 鹏程933 所有, 如有侵权,请联系我们删除。

“Vue8-Vuex与Router”的评论:

还没有评论