十四、Vuex的使用

  1. Vuex是什么?

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。简单点理解,就是凡是将数据用状态管理模式来存储,在用到该数据的地方,只要一处地方发生变化,另一处也会发生变化,这样就解决了vue中非父子组件传值的问题,当然了,Vuex的作用不止如此,还有许多新的功能,诸如配合路由守卫做登陆拦截,配合localStorage进行本地数据的存储与管理等等。

  2. Vuex的安装

    //npm的安装方式
    npm install vuex --save
  3. Vuex的简单实用

    1. 利用Vuex和localStorage进行用户状态管理,防止刷新浏览器后用户状态丢失,实现如下:

       //发送请求
      this.axios
      .post(
      "url",
      JSON.stringify(this.userInfo)
      )
      .then(res => {
      console.log(res.data);
      if (res.status == 200 && res.data.verify == true) {
      const userName = res.data.uphone;
      const token = res.data.token;
      this.$router.push({ path: "/" });
      //将token通过commit提交到Vuex
      this.$store.commit("getToken", token);
      // 将登录名使用vuex传递到Home页面
      this.$store.commit("userName", userName);
      } else {
      this.$notify({
      title: "提示信息",
      message: "账号或密码错误",
      type: "error"
      });
      }
      })
      .catch(err => {
      console.log(err);
      });
    2. 通过Vuex和localStorage存储用户信息以保持用户状态

      import Vue from 'vue'
      
      import Vuex from 'vuex'
      
      Vue.use(Vuex)
      
      const mutations = {
      
         userName: (state, user_name) => {
      
             state.user_name = user_name
      
           // 把登录的用户的名保存到localStorage中,防止页面刷新,导致vuex重新启动,用户名就成为初始值的情况
      
              localStorage.setItem('user_name', user_name)
      
          },
      
          getToken(state, token) {
      
              state.token = token;
      
              localStorage.setItem('token', token)
      
          },
      
      }
      
      const state = {
      
          user_name: localStorage.getItem('user_name'),
      
          token: localStorage.getItem('token'),
      
      }
      
      // getters 只会依赖 state 中的成员去更新
      
      const getters = {
      
         userPhone: (state) => state.user_name,
      
          token: (state) => state.token,
      
      }
      
      const store = new Vuex.Store({
      
          actions,
      
          mutations,
      
          state,
      
          getters
      
      })
      
      export default store
    3. 至此,该功能已实现

十五、侧边导航栏的实现

  1. 有时候,我们在项目中有这样的需求,页面左侧是菜单栏,右边是每个菜单项所对应的内容区,点击不同的菜单项,内容区会显示不同的内容,这个怎样实现呢?我采取了子路由渲染的方法,如下:

    1. 假设我们有四个菜单项模块,那么它的路由配置是这样的:

      {
      path: '/inform',
      name: inform,
      component: (resolve) => require(['../components/presonal/inform.vue'], resolve),
      meta: {
      isLogin: true
      },
      children: [{
      path: '/inform/course',
      name: course,
      component: (resolve) => require(['../components/presonal/slider/course.vue'], resolve)
      }, {
      path: '/inform/interactive',
      name: interactive,
      component: (resolve) => require(['../components/presonal/slider/interactive.vue'], resolve)
      },
      {
      path: '/inform/system',
      name: system,
      component: (resolve) => require(['../components/presonal/slider/system.vue'], resolve)
      },
      {
      path: '/inform/privateLetter',
      name: privateLetter,
      component: (resolve) => require(['../components/presonal/slider/privateLetter.vue'], resolve)
      }
      ]
      },
    2. 然后我们在它的父级路由所对应的页面加上<router-view></router-view>即可实现该功能

  2. 至此,该功能已实现

从无到有构建vue实战项目(七)的更多相关文章

  1. 从无到有构建vue实战项目(四)

    六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...

  2. 从无到有构建vue实战项目(一)

    vue的安装 首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装 输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 ...

  3. 从无到有构建vue实战项目(二)

    二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...

  4. 从无到有构建vue实战项目(三)

    四.响应式布局的实现 elemnt-ui参考bootatrap提供了响应式布局,附上地址:https://element.eleme.cn/#/zh-CN/component/layout 以下是我的 ...

  5. 从无到有构建vue实战项目(五)

    八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vu ...

  6. 从无到有构建vue实战项目(六)

    十.徒手撸一个vue下拉左侧二级导航 先附上最终效果图: vue代码: <div class="dropdown-menu-explore" v-on:mouseover=& ...

  7. 从无到有构建vue实战项目(八)

    十六.vue-lazyload的使用 首先,我们需要下载vue-lazyload包: npm i vue-lazyload -S 下载好之后,我们将它引入到自己的项目: //main.js //引入图 ...

  8. Vue 实战项目: 硅谷外卖(1)

    第 1 章: 准备 1.1. 项目描述 1) 此项目为外卖 WebApp(SPA) 2) 包括商家, 商品, 购物车, 用户等多个子模块 3) 使用 Vue 全家桶+ES6+Webpack 等前端最新 ...

  9. Vue 实战项目开发流程

    一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...

随机推荐

  1. spring配置文件比较全的约束

    个人总结:Spring的配置文件applicationContext.xml约束文件.全面约束 <?xml version="1.0" encoding="utf- ...

  2. 如何启用linux的路由转发功能

    如何使用iptables的NAT功能把红帽企业版Linux作为一台路由器使用? 方法: 提示: 以下方法只适用于红帽企业版Linux 3 以上. 1.打开包转发功能: echo "1&quo ...

  3. Python基础总结之第三天开始重新认识‘字符串’(新手可相互督促)

    年薪20万的梦想,又进了一步... 戏好多 ’字符串‘开始啦~ 字符串的定义:字符串可以用英文单引号或双引号又或者三引号包围起来. 为毛有单引号,还要有双引号和三引号??? 看案例吧: 字符串的其他使 ...

  4. kubernetes二进制高可用部署实战

    环境: 192.168.30.20 VIP(虚拟) 192.168.30.21 master1 192.168.30.22 master2 192.168.30.23 node1 192.168.30 ...

  5. spring源码分析之配置文件名占位符的解析(一)

    一.直接写个测试例子 package com.test; import org.junit.Test; import org.springframework.context.ApplicationCo ...

  6. Javaweb入门 数据库第一天

    数据库概述 本菜鸟使用的数据库软件为Mariadb,以下内容都是以Mariadb数据库软件来写的学习总结. 数据库 所谓的数据库就是用于存储.管理数据的仓库,数据库根据底层存储数据结构的不同可以分为很 ...

  7. javaweb入门---web服务器与HTTP协议基础

    上文web基础简介了web到底是什么,以及身为Java开发人员需要掌握的地方.本文将解答web服务器是什么,怎么使用?还有关于http协议的基础知识. web服务器 web服务器的大概念很广泛,但是通 ...

  8. JS-数组的定义

  9. Restful API 中的错误处理

    简介 随着移动开发和前端开发的崛起,越来越多的 Web 后端应用都倾向于实现 Restful API. Restful API 是一个简单易用的前后端分离方案,它只需要对客户端请求进行处理,然后返回结 ...

  10. Keil uVision4 ——如何新建一个项目

    一.打开Keil4软件,点击Project,再点击New μVision Projrct. 二.新建一个文件夹,并在里面输入这个项目的名字. 三.点击Intel,根据实际情况选择,这里选择的是80/8 ...