Vuex的使用

在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，用于任意组件间的通信

state：存储数据的地址

actions：中转站，可发送异步请求增加判断

mutations：真正改state数据的地方

Vuex的使用流程

- 第一步：在state中定义变量

- 第二步：在组件中通过 this.$store.dispatch('actions中定义的函数')，触发actions中得函数执行

- 第三步：在actions中的函数中，调用context.commit('mutations中定义的函数')

- 第四步：在mutations中定义的函数实现真正的修改state中的数据

- 第五步：页面中只要使用$store.state.变量，变量变化，页面就变化 实现了组件间的通信

️ 注意点：

- 在组件中可以直接调用commit触发(mutations中定义的函数)

- 在组件中可以直接修改state中定义变量

Vuex的执行流程图

执行流程：

- 用户进行操作，通过dipatch提交一个actions

-actions接收到这个事件之后，在actions中可以执行一些异步或者同步操作，然后根据不同的情况去分发给不同的mutations

-actions通过commit去触发mutations

-最后mutations去更新state数据值，state更新之后，就会通知vue渲染页面并显示

Vuex伪代码

   export default new Vuex.Store({
    state:{
        // 存放真正的变量，也就是数据
    },
    mutations:{
        // 修改state的数据操作
    },
    actions:{
        // 可以进行异步同步请求，校验权限等操作
    }
})

Vue-router的使用

官方提供的用来实现SPA 的vue插件，有了它以后我们可以写很多页面组件，通过地址栏路径的不同来显示不同的页面组件

基本使用流程

- 安装插件：

cnpm install vue-router@4

- 在src目录下新建router文件夹内再创index.js文件用来存放路由

- 在index.js中引入插件

import Vue from 'vue'//引入vue
import VueRouter from 'vue-router'//引入vue-router路由模块
Vue.use( VueRouter ) //使用vue-router这个第三方插件

- 创建了一个router对象实例并导出

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
]
export default router //导出

-入口文件main.js中引入路由实例 router

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

- 在App.vue中用一个 router-view 的组件来给路由一个展示区域

<template>
  <div id="app">
    <router-view>
    </router-view>
  </div>
</template>

路由的跳转

- 在html中使用

router-link组件：可以在不重新加载页面的情况下更改URl处理URl的生成以及编码

to：来指定跳转的链接

<div id ="app">
    <p>
    <router-link to="/home">首页</router-link>
    </p>
</div>

- 在js中使用

当需要先进行权限判断的时候需要在js中进行跳转，校验通过跳转删除校验不通过跳转到登陆

export default {
    Todel() {
        if (usernane) {
            this.$router.push('/del')
        }else{
            this.$router.push('/login')
        }
    }
}

携带参数的路由跳转

- 在请求地址中带参数

<div id ="app">
    <p>
    <router-link to="/login/?username=abc&password=123">用户登陆</router-link>
    </p>
</div>

在跳转页面的组件中接受：

this.$route.query.username
this.$route.query.password

- 在地址中带参数

<div id ="app">
    <p>
    <router-link to="/bookList/1">展示书籍</router-link>
    </p>
</div>

在跳转页面的组件中接受：

this.$route.params.

路由嵌套

关键字：children

在router/index.js相应的路由中通过关键字进行路由的嵌套

const routes = [
    {
        path: '/login',
        name: 'login',
        component: Login,
        children: [
            {
                name: 'books',
                path: 'books',
                component: Books
            },
]

️ 注意点：

- 必须要在Login组件中加<router-view></router-view>用来渲染子路由

- 只会变更login下router-view包裹的位置

路由守卫

- 前置路由守卫：有时候根据用户的权限区分普通用户访问的接口与超级用户才能访问的接口，设置守卫来区分

router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    if (to.name == 'shoppingcart') {
        let name = localStorage.getItem('name')
        if (name) {
            next()
        } else {
            alert('不好意思没有权限')
        }
    } else {
        next()
    }
})

- 后置路由守卫：用来设置跳转后页面标题的名字，根据页面组件名字设置页面名

router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.name
})

关于“Vuex和Vue router能解决什么问题，如何使用呢？”的内容今天就到这，感谢各位的阅读，大家可以动手实际看看，对大家加深理解更有帮助哦。如果想了解更多相关内容的文章，关注我们，群英网络小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• jQuery中用css方法怎样对元素删除

  在jquery中，可以利用css()方法来控制css，给元素添加“display: none;”样式，进而删除该元素；语法格式为“$("元素").css("display", "none");”。

• 如何利用vue实现拖拽排序效果，思路方法是什么

  这篇文章主要为大家详细介绍了vue实现移动端touch拖拽排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JS截取字符串的三个常用方法及区别是什么

  substr() 方法substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。stringObject.substr(start,length)start：必需。要抽取的子串的起始下标。必须是数值。如

• Vue自定义事件内容分发的原理及代码是什么

  这篇文章主要为大家介绍了Vue的自定义事件内容分发，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

• jquery实现上下滚动广告效果代码实例

  我们在浏览网站时，经常会看到滚动广告，那么这是怎么样实现的呢？这篇文章就给大家介绍一下jquery实现上下滚动的效果，文章中有详细的代码示例，对此感兴趣的朋友就继续往下看吧。