首页 > 其他分享 >46.使用过vuex和vue-router吗

46.使用过vuex和vue-router吗

时间:2022-11-13 21:15:02浏览次数:64  
标签:vue 46 state 实例 组件 router vuex 路由

使用过,vuex是状态管理工具,它的数据可以被所有的组件获取,方法可以被所有的组件调用 ;

vuex  的内部的运行机制:state提供了数据驱动视图,dispath派发actions 执行异步操作,commit提交mutations 修改state 数据 ;

vuex的核心属性:

  state:数据保存源

  mutations :唯一修改state数据的方法

  getter :监听state数据的变化

  actions:执行异步操作 ;

  modules:vuex的模块化 

基本使用:

  1. 挂载 vuex  ========    Vue.use(Vuex) ;

  2. 实例化仓库 ===========   const store = new Vuex.Store(  {  配置项  } ) 

  3. 暴漏仓库实例 store 

 

因为 vue 是 SPA 应用的框架,只有一个页面,但是要显示不同的内容,所以vue设计了路由机制,地址path和组件的产生映射关系,通过跳转不同地址,来显示不同的组件内容 ;

基本使用:

  1. 挂载(注册)路由  = ========= Vue.use(Router);

  2. 设置路由规则 ,就是把path地址和组件component关联起来,生成映射关系 ;

  3. 创建路由实例并注入规则 routes  ============== new Router({ 配置项 })

  3. 暴漏路由实例 router 

  

标签:vue,46,state,实例,组件,router,vuex,路由
From: https://www.cnblogs.com/zhulongxu/p/16886950.html

相关文章

  • 组件之间的通信2-->vuex状态管理
    在上期,我们讲了父子组件的传递方式,但是,如果我们想知道这些数据从哪里来的话,就需要一层一层找父组件,最后才能找到数据,容易造成Prop逐级透传问题今天,我们将介绍另一......
  • 【Vue2-04】scoped样式
    scoped样式作用:让样式在局部生效,防止冲突写法:<stylescoped><template><div></div></template><script>exportdefault{}</script......
  • 【Vue2-02】ref属性
    ref属性被用来给元素或子组件注册引用信息(id的替代者)应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)使用方式:打标识:<h1ref="xxx">...</......
  • 【Vue2-03】props属性
    props配置功能:让组件接收外部传过来的数据数据传递:<Demoname="xxx">接收数据:方式一(只接收): props:['name'] 方式二(限制类型): props:{ name:String......
  • 35. vue响应式的get和set如何触发或者过程
    首先,vue内部使用 Object.defineProperty给data中的数据添加了getter和setter函数 ;当我们访问数据的时候,会触发getter函数return给我们数据值,当我们修改数据......
  • 34.vue响应式
    响应式就是数据发生变化,ui界面自动更新内容;vue响应式的实现是在创建vue实例的时候,遍历data数据,通过Object.defineProperty给每个数据添加getter和setter函数,获取......
  • react-router-dom v6+antd+react18配置
    官网地址:react-router1.安装的版本,antd版本4.24.12.项目目录结构3.入口文件index.js配置,react18版本发生了一些变化,改为以下写法importReactfrom'react';import......
  • 32. vue框架的理解
    vue是创建用户界面的框架,是创建SPA应用的框架,采用了MVVM模型,是数据驱动视图;使用了业务逻辑和页面解构分离的开发思想;使用高效的diff算法渲染列表;使用组件化开发,提高代......
  • Vue路由守卫操作-全局路由守卫
     先上代码:router.beforeEach=全局路由守卫//这个东西叫做路由守卫//在我们浏览器上面输入了url地址以后跳转到一个组件去router.beforeEach((to,from,next)=>......
  • CF1746D题解
    很好的一道贪心题。首先对于每条路径,由于要最大化权值,每条路径肯定要延伸到叶子节点。切入点肯定在\(|c_u-c_v|\leq1\),也就是说由节点\(i\)延伸下去的路径要均匀分配......