区块链技术博客
www.b2bchain.cn

vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现求职学习资料

本文介绍了vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

仓库传送门
本节包含如下内容:

  • 引入vuex
  • sessionStorage 前端数据存储
  • 登录流程实现

本章节完成效果

vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现

vuex 引入

yarn add vuex 

`

是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了。

vuex核心

  • state 存放状态

  • mutations state成员操作

  • actions 异步操作 (action 与 mutation的区别在于 action 技能执行异步操作又能执行同步操作,而 mutations只能执行同步操作)

  • getters 加工state成员给外界

  • modules 模块化状态管理

  • Vuex官网给出的流程图
    vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现

VueX(Vue状态管理模式)

拆分store

咱们是模块化开发业务功能,那么模块的数据也应该是独立拆分开来的,而且vuex提供了modules 用于模块化管理数据。
name: true 这个属性很重要,这个属性的作用是给vuex增加了命名空间,不会发生action中方法调用错误的问题

在src/store下 新建modules文件夹,并创建sign.js

const sign = {   namespaced: true, // 命名空间   state: {     verifyCode: '094607', // 默认的验证码   },   mutations: {    },   actions: {    },   getters: {    }, }; export default sign;

src/store下index.js代码如下

import Vue from 'vue'; import Vuex from 'vuex'; import sign from './modules/sign';  Vue.use(Vuex);  export default new Vuex.Store({   state: {   },   mutations: {   },   actions: {   },   modules: {     sign,   }, });

验证码登录流程实现

由于我们无法接入抖音的后端接口(不影响实战课),验证码登录流程 我们将后端返回的验证码值写死在state中

src/store/modules 下的sign.js 如下

import router from '../../router';  const sign = {   namespaced: true, // 命名空间   state: {     defaultCode: '094607', // 默认的验证码   },   mutations: {    },   actions: {     //  登录操作     sign({ state, commit, rootState }, params) {       //  登录成功之后 session中缓存登录标识       sessionStorage.setItem('isLogin', JSON.stringify(true));       //  登录成功之后 跳转到webApp主页       router.replace({ path: '/' });     },   },   getters: {    }, }; export default sign;

code.vue 做如下更改

  • 引入mapState、mapActions
  • 调用sign.js中的sign 方法实现登录
    “` javascript

仓库传送门
本节包含如下内容:

  • 引入vuex
  • sessionStorage 前端数据存储
  • 登录流程实现

本章节完成效果

vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现

vuex 引入

yarn add vuex 

`

是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了。

vuex核心

  • state 存放状态

  • mutations state成员操作

  • actions 异步操作 (action 与 mutation的区别在于 action 技能执行异步操作又能执行同步操作,而 mutations只能执行同步操作)

  • getters 加工state成员给外界

  • modules 模块化状态管理

  • Vuex官网给出的流程图
    vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现

VueX(Vue状态管理模式)

拆分store

咱们是模块化开发业务功能,那么模块的数据也应该是独立拆分开来的,而且vuex提供了modules 用于模块化管理数据。
name: true 这个属性很重要,这个属性的作用是给vuex增加了命名空间,不会发生action中方法调用错误的问题

在src/store下 新建modules文件夹,并创建sign.js

const sign = {   namespaced: true, // 命名空间   state: {     verifyCode: '094607', // 默认的验证码   },   mutations: {    },   actions: {    },   getters: {    }, }; export default sign;

src/store下index.js代码如下

import Vue from 'vue'; import Vuex from 'vuex'; import sign from './modules/sign';  Vue.use(Vuex);  export default new Vuex.Store({   state: {   },   mutations: {   },   actions: {   },   modules: {     sign,   }, });

验证码登录流程实现

由于我们无法接入抖音的后端接口(不影响实战课),验证码登录流程 我们将后端返回的验证码值写死在state中

src/store/modules 下的sign.js 如下

import router from '../../router';  const sign = {   namespaced: true, // 命名空间   state: {     defaultCode: '094607', // 默认的验证码   },   mutations: {    },   actions: {     //  登录操作     sign({ state, commit, rootState }, params) {       //  登录成功之后 session中缓存登录标识       sessionStorage.setItem('isLogin', JSON.stringify(true));       //  登录成功之后 跳转到webApp主页       router.replace({ path: '/' });     },   },   getters: {    }, }; export default sign;

code.vue 做如下更改

  • 引入mapState、mapActions
  • 调用sign.js中的sign 方法实现登录
    “` javascript

仓库传送门
本节包含如下内容:

  • 引入vuex
  • sessionStorage 前端数据存储
  • 登录流程实现

本章节完成效果

vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现

vuex 引入

yarn add vuex 

`

是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.
试想这样的场景, 比如一个Vue的根实例下面有一个根组件名为App.vue, 它下面有两个子组件A.vue和B.vue, App.vue想要与A.vue或者B.vue通讯可以通过props传值的方式, 但是如果A.vue和B.vue之间的通讯就很麻烦了。

vuex核心

  • state 存放状态

  • mutations state成员操作

  • actions 异步操作 (action 与 mutation的区别在于 action 技能执行异步操作又能执行同步操作,而 mutations只能执行同步操作)

  • getters 加工state成员给外界

  • modules 模块化状态管理

  • Vuex官网给出的流程图
    vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现

VueX(Vue状态管理模式)

拆分store

咱们是模块化开发业务功能,那么模块的数据也应该是独立拆分开来的,而且vuex提供了modules 用于模块化管理数据。
name: true 这个属性很重要,这个属性的作用是给vuex增加了命名空间,不会发生action中方法调用错误的问题

在src/store下 新建modules文件夹,并创建sign.js

const sign = {   namespaced: true, // 命名空间   state: {     verifyCode: '094607', // 默认的验证码   },   mutations: {    },   actions: {    },   getters: {    }, }; export default sign;

src/store下index.js代码如下

import Vue from 'vue'; import Vuex from 'vuex'; import sign from './modules/sign';  Vue.use(Vuex);  export default new Vuex.Store({   state: {   },   mutations: {   },   actions: {   },   modules: {     sign,   }, });

验证码登录流程实现

由于我们无法接入抖音的后端接口(不影响实战课),验证码登录流程 我们将后端返回的验证码值写死在state中

src/store/modules 下的sign.js 如下

import router from '../../router';  const sign = {   namespaced: true, // 命名空间   state: {     defaultCode: '094607', // 默认的验证码   },   mutations: {    },   actions: {     //  登录操作     sign({ state, commit, rootState }, params) {       //  登录成功之后 session中缓存登录标识       sessionStorage.setItem('isLogin', JSON.stringify(true));       //  登录成功之后 跳转到webApp主页       router.replace({ path: '/' });     },   },   getters: {    }, }; export default sign;

code.vue 做如下更改

  • 引入mapState、mapActions
  • 调用sign.js中的sign 方法实现登录
    “` javascript

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue实战 实现视频类webapp:(十五) 引入vuex实现数据共享及登录流程实现求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们