vue获取全局变量

本篇文章给大家谈谈获取vue的全局路由状态，以及vue获取全局变量对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、Vue路由守卫（全局路由守卫、路由独享守卫、组件内部守卫）

2、Vue笔记（Vuex全局状态管理器）

3、用vue router如何获得当前页面的路由？

4、VUE3笔记6（路由router，全局状态管理）

5、vue 动态获取当前路由信息

Vue路由守卫（全局路由守卫、路由独享守卫、组件内部守卫）

一、全局守卫（两种，在main.js文件下设置）

第一种：router.beforeEach((to,from,next)={})

*to：进入到那个路由去

*from:从那个路由来的（上一个路由）

*next：顺延，next()---（放行）---next('/login')---（不放行，让他跳转到login页面）--函数，决定是否展示你要看到的路由页面

第二种：router.afterEach((to,from)={})

二、路由独享守卫

beforeEnter((to,from,next)={//里边的用法和全局一样})

三、组件内部守卫

Vue笔记（Vuex全局状态管理器）

全局状态管理器，可以在项目的任何一个组件中去获取和修改，修改可以得到全局响应的变量

vue-cli2 项目中安装vuex，使用 npm install vuex --save

安装成功后，在src目录下新建一个store文件,里面创建一个js文件

在js文件中写入：

然后在main.js文件中引入 store 并注册到 vue 实例中

vuex的文件配置到这里就完成了

现在再回去看store文件里的参数，这几个对象就是vuex五大核心：

State ：可全局访问的对象

Getter ：和vue的computed一样，用来实时监听state的值的变化（最新状态）

Mutation ：存放改变state值的方法（同步）

Action ：触发mutations里面的方法（异步）

module ：模块

State是存储在Vuex中的数据对象，和Vue实例中的data一样。只不过State是可以全局访问的。

定义stata对象，直接在 state 里面定义 key:val ，它可以定义任意数据类型

在页面中获取state的值 使用 this.$store.state

在这里 state 通常都是挂载到 computed 计算属性上，这样当state的值发生改变的时候都能及时的响应。

当然也能用到 watch 去监听

State中的辅助函数 mapState

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

输出

Vuex 允许我们在 store 中定义 getter （可以认为是 store 的计算属性）。就像计算属性 computed 一样， getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值( state 中的属性)发生了改变才会被重新计算。

Getter的作用就是用来实时监听state的值的变化

定义Geters对象

使用 state 作为其第一个参数

可以使用其他 getter 函数作为第二个参数

在页面中使用getters，使用 this.$store.getters

Getters中的辅助函数 mapGetters

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

输出

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

使用 state 作为第一个参数

使用 this.$store.commit('方法名') 触发mutations中的方法

输出

而第二参数官方解释叫 提交载荷（Payload）

可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）

简单来说就是可以在在第二参数里传入额外的参数

这里还是用name来做例子

输出

在 Vuex 中，mutation 必须是同步函数

Action 可以包含任意异步操作，Action的作用就是异步触发Mutations

定义action对象

接收一个 context 参数和一个要变化的形参

context 与 store 实例具有相同的方法和属性，所以他可以执行 context.commit("") ，也可以使用 context.state 和 context.getters 来获取 state 和 getters 。

使用 this.$store.dispatch("方法名") 方法执行Actions

输出

同样Action还支持载荷方法，传入第二形参

输出

其中 module 的作用是可以把 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

主要是为了解决由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

简单来说就是可以把vuex模块化

用vue router如何获得当前页面的路由？

用vue router如何获得当前页面的路由的方法如下：

路由器将自渲染对应的组件以及更新路由信息：

其中router-view可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this.$对象上。

路由对象和路由匹配：

路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。

如属性 说明：

$route.path 当前路由对象的路径，如'/vi

$route.query 请求参数，如/foo?user=1获取到query.user = 1

$route.router 所属路由器以及所属组件信息

$route.matched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$route.name 当前路径名字

当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。

这里只是做了一些简单的介绍，最后，更多高级用法请参考官方文档。

VUE3笔记6（路由router，全局状态管理）

注意：路由视图组件router-view标签不要漏了

又比如此处案例

    2.2 需要传参的地址，例如Goods.vue的地址需要传参数id

        2.2.1    首先在路由中开启props：true

        2.2.2    在Goods.vue中，接受参数props：[ 'id' ]

        2.2.3    然后引入组合式api，使用规则如下所示

设置如下（ 加粗字体为模块化全局状态管理的引用方式 ）

首先引入组合式API，import { useStore } from "vuex";

注意：加粗字体是模块化全局状态管理的使用规则的不同点（数据， 计算属性（需要加上中括号） ，函数的不同）

在store中建议文件夹modules，并在其中新建phone.js模块，编译如下，

注 意点：设置私有命名空间（加粗字体），其他照旧

        4.1.1   在src中新建工具包utils，其中建立文件index.js文件，编译如下函数

            4.1.2 在组件中引用

            4.1.3 在组件中使用（注意：上述文件只能映射数据，不能映射方法）

            加粗字体是映射函数的使用方式（删减和应用方式）

vue 动态获取当前路由信息

vue 动态获取当前route路由信息

watch: {

    $route: {

       handler:function(route){

        console.log(route)

      },

      immediate:true

    }

  },

关于获取vue的全局路由状态和vue获取全局变量的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。