vue中vuex的五个属性和基本用法,另加js-cookie的使用

VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

Vuex有五个核心概念:

state, getters, mutations, actions, modules。

1. state:

vuex的基本数据,用来存储变量

2. geeter:

从基本数据(state)派生的数据,相当于state的计算属性

3. mutation:

提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。

commit:同步操作,写法:this.$store.commit('mutations方法名',值)

如:this.$store.commit('SET_PASSWORD',data.Password)

4. action:

和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。

dispatch:异步操作,写法:this.$store.dispatch('actions方法名',值)

如:this.$store.dispatch('login',res.data)

5. modules:

模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

Vuex的用法:

文件夹步骤及引入与挂载

在vue项目的src文件下创建store文件夹(如果已经安装好了vuex的话),然后在store文件夹中创建index.js和getters.js文件与Modules文件夹

在项目的main.js中引入 和挂载

import store from './store'

let vue = new Vue({

router,

store,

render: (h) => h(App),

}).$mount("#app");

store文件下的index.js

//store文件下的index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import bankCard from './Modules/bankCard'
import user from './Modules/user'Vue.use(Vuex)export default new Vuex.Store({getters,modules: {bankCard,user}
})

store文件下的getters.js

//store文件下的getters.js
const getters = {bankCards: state => state.bankCard.bankCards,selectBankCards: state => state.bankCard.selectBankCards,token: state => state.user.token
}
export default getters

在modules文件夹下创建一个user.js文件,user.js内容:


import { setToken, removeToken } from '@/utils/auth'
import { getLogin } from '@/api/login'const user = {state: {name: '',roles: [],permissions: [],token: undefined,// Password:'',},mutations: {/*commit:同步操作,写法:this.$store.commit('mutations方法名',值)如:this.$store.commit('SET_PASSWORD',data.Password)*/SET_TOKEN: (state, token) => {state.token = token},SET_ROLES: (state, roles) => {state.roles = roles},SET_PERMISSIONS: (state, permissions) => {state.permissions = permissions},// SET_PASSWORD:(state,Password)=>{//   state.Password=Password// }},actions: {/*dispatch:异步操作,写法:this.$store.dispatch('actions方法名',值)如:this.$store.dispatch('login',res.data)*/// 登录Login({ commit }, userInfo) {return new Promise((resolve) => {const { email, password } = userInfogetLogin({ email, password }).then(res => {const analysis = JSON.parse(atob(res.data.split('.')[1]))setToken('token', res.data)setToken('userId', analysis.userId)setToken('email', email)setToken('password', password)commit('SET_TOKEN', res.data)setToken('Admin-Token', res.data)  resolve()})})},// 获取用户信息GetInfo({ commit }) {return new Promise((resolve) => {commit('SET_PERMISSIONS', [1])commit('SET_ROLES', ['ROLE_DEFAULT'])resolve()// getInfo({token: sessionStorage.getItem('JWT')})//  .then(result => {//   const res = result.data;//   const userName = res.userName;//   if (res.permissionCodeList //      && res.permissionCodeList.length > 0) //   { // 验证返回的roles是否是一个非空数组//     commit("SET_PERMISSIONS", res.permissionCodeList);//   } else {//     commit("SET_ROLES", ["ROLE_DEFAULT"]);//   }//   commit("SET_NAME", userName);//   resolve(res);// }).catch(error => {//   reject(error);// });})},// 退出系统// LogOut({ commit, state }) {//   return new Promise((resolve, reject) => {// logout(state.token).then(() => {//   commit('SET_TOKEN', '')//   commit('SET_ROLES', [])//   commit('SET_PERMISSIONS', [])//   removeToken()//   resolve()// }).catch(error => {//   reject(error)// })// })// },// 前端 登出FedLogOut({ commit }) {return new Promise(resolve => {commit('SET_TOKEN', '')removeToken('Admin-Token')removeToken('token')removeToken('password')removeToken('email')removeToken('userId')resolve()})}}
}export default user

另:安装js-cookie :

1、方式一:在你的工程项目中使用npm进行安装

 npm install js-cookie --save

2、方式二:直接使用cdn资源

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js">
</script>

3、方式三:本地下载js-cookie的文件,然后进行项目script标签引入:

<script src="/path/to/js.cookie.js"></script>

src 文件夹下utils文件夹下auth.js内容:

//直接抛出,使用的时候直接引入 
//如:import { setToken, removeToken } from '@/utils/auth'
import Cookies from 'js-cookie'// 60秒 * 60分钟 * 24小时
function expires(seconds = 60 * 60 * 24) {return new Date(new Date() * 1 + seconds * 1000)
}export function getToken(TokenKey) {return Cookies.get(TokenKey)
}export function setToken(TokenKey, token, seconds) {return Cookies.set(TokenKey, token, { expires: expires(seconds) })
}export function removeToken(TokenKey) {return Cookies.remove(TokenKey)
}

使用

//点击登录
getLogin(){this.$store.dispatch('Login', {email: this.data.Email, password: this.data.Password }).then(() => {this.$router.push({ path: this.redirect || '/Home' }).catch(() => {})})},
//点击退出           
logOut(){this.$store.dispatch('FedLogOut')this.$router.push({path:"/"})},

使用下面这两种方法存储数据:

commit:同步操作,写法:this.$store.commit('mutations方法名',值)

如:this.$store.commit('SET_PASSWORD',data.Password)

dispatch:异步操作,写法:this.$store.dispatch('actions方法名',值)

如:this.$store.dispatch('login',res.data)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/30784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】-- 进程间通信

目录 一、进程间通信介绍 二、管道 1.什么是管道&#xff08;pipe&#xff09; 2.重定向和管道 &#xff08;1&#xff09;为什么要有管道的存在 &#xff08;2&#xff09;重定向和管道的区别 3.匿名管道 &#xff08;1&#xff09;匿名管道原理 &#xff08;2&…

SpringCloud实用篇5——elasticsearch基础

目录 1.初识elasticsearch1.1 了解ES1.1.1 elasticsearch的作用1.1.2 ELK技术栈1.1.3 elasticsearch和lucene1.1.4 总结 1.2.倒排索引1.2.1.正向索引1.2.2.倒排索引1.2.3.正向和倒排 1.3 es的一些概念1.3.1 文档和字段1.3.2 索引和映射1.3.3 mysql与elasticsearch 1.4 部署单点…

C# ListBox自动滚动方法

1、方法1&#xff1a;添加记录后&#xff0c;选择最后一条记录&#xff0c;让滚动条滚动到底部&#xff0c;再自动取消 listBox1.Items.Add(t ":a good day"); listBox1.SelectedIndex listBox1.Items.Count - 1; listBox1.SelectedIndex -1; //是否取消选中行…

直播招聘小程序解决方案

项目开发愿景 介绍工作拿佣金&#xff0c;Boss直播现真身。做为直播招聘的新平台&#xff0c;让求职和招聘变得更简单&#xff01;企业发布招聘视频&#xff0c;展现公司环境与实力&#xff0c;开通会员可以直播招聘、在线面试功能&#xff1b;求职者刷视频可以刷到工作…

信息安全:访问控制技术原理与应用.

信息安全&#xff1a;访问控制技术原理与应用. 访问控制是网络信息系统的基本安全机制。访问控制是指对资源对象的访问者授权、控制的方法及运行机制。访问者又称为主体&#xff0c;可以是用户、进程、应用程序等&#xff1b;而资源对象又称为客体&#xff0c;即被访问的对象&…

react中hooks分享

一. HOOKS是什么 在计算机程序设计中&#xff0c;钩子一词涵盖了一系列技术&#xff0c;这些技术用来通过拦截函数调用、消息或在软件组件之间传递的事件来改变或增加操作系统、应用程序或其他软件组件的行为。处理这些被截获的函数调用、事件或消息的代码称为“hook”。 在r…

C++核心编程:C++中的引用

C中的引用 引用的基本语法 作用&#xff1a;给变量起别名 语法&#xff1a;数据类型 & 别名 原名 //比如给一个int变量a命名一个别名 b int &b a;b 20; cout<< a << endl;//a 20引用的注意事项 引用必须初始化 int &b;//错误的引用在初始化后&…

Wav2Lip实践

1. 安装 1.1 安装 conda以指定python版本运行环境 下载&#xff1a;Index of /https://repo.anaconda.com/archive/index.html 1.2 如按旧项目基于python3.6版本对话&#xff0c;会有很多包找不到的情况&#xff0c;经摸索后以python3.9构建成功&#xff0c; conda instal…

并发——何谓悲观锁与乐观锁

乐观锁对应于生活中乐观的人总是想着事情往好的方向发展&#xff0c;悲观锁对应于生活中悲观的人总是想着事情往坏的方向发展。这两种人各有优缺点&#xff0c;不能不以场景而定说一种人好于另外一种人。 悲观锁 总是假设最坏的情况&#xff0c;每次去拿数据的时候都认为别人会…

mysql日期函数(查询最近n(天/月/年)、计算日期之间的天数等)

mysql日期函数 目录 mysql查询最近一个月数据返回当前日期和时间将字符串转变为日期日期 d 减去 n 天后的日期计时间差&#xff0c;返回 datetime_expr2 − datetime_expr1 的时间差算查询当天数据 ADDDATE(d,n)计算起始日期 d 加上 n 天的日期 SELECT ADDDATE("2017-06…

LT8711HE 是一款高性能的Type-C/DP1.2到HDMI2.0转换器

LT8711HE 1.描述 LT8711HE是一种高性能的Type-C/DP1.2到HDMI2.0转换器&#xff0c;设计用于连接USB Type-C源或DP1.2源到HDMI2.0接收器。LT8711HE集成了一个DP1.2兼容的接收器&#xff0c;和一个HDMI2.0兼容的发射机。此外&#xff0c;还包括两个CC控制器&#xff0c;用于CC通…

单例模式-java实现

介绍 单例模式的意图&#xff1a;保证某个类在系统中有且仅有一个实例。 我们可以看到下面的类图&#xff1a;一般的单例的实现&#xff0c;是属性中保持着一个自己的私有静态实例引用&#xff0c;还有一个私有的构造方法&#xff0c;然后再开放一个静态的获取实例的方法给外界…

二次封装ajax和axios

ajax app.config.globalProperties.$http function(url, method, data, async, fun) {$.ajax({url: baseUrl url, //请求地址type: method, //请求方式dataType: json, //数据类型contentType: "application/json",xhrFields: { //跨域设置withCredentials: t…

【手撕C语言】多线程

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言,Linux基础,ARM开发板&#xff0c;软件配置等领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff01;送给自己和读者的一句鸡汤&#x1f914;&…

多位数码管动态扫描显示变化数据(数码管局部闪烁)

/*----------------------------------------------- 内容&#xff1a;多位数码管分别显示不同数字&#xff0c;这种扫描显示方式成为动态扫描&#xff0c;并不停变化赋值 ------------------------------------------------*/ #include<reg52.h> //包含头文件&#xff0…

python 基础

1.Python 1.1 环境搭建&#xff1a;官网下载python&#xff0c;编译器&#xff1a;pycharm或jupyter 1.2 变量 &#xff08;1&#xff09;语法&#xff1a;变量名变量 &#xff08;2&#xff09;标识符命名规则&#xff1a;由数字、字母、下划线组成&#xff1b;不能以数字…

tcp发送整型,结构体等数据的方法

测试环境 Receiver: x86 UbuntuSender: arm64 android 发送整型数 C语言和套接字库来发送一个整型变量&#xff08;int&#xff09;的客户端程序。 它首先创建一个TCP套接字&#xff0c;然后连接到指定的服务器地址和端口。接着&#xff0c;它将一个整型变量&#xff08;in…

【数据结构与算法——TypeScript】数组、栈、队列、链表

【数据结构与算法——TypeScript】 算法(Algorithm)的认识 解决问题的过程中&#xff0c;不仅仅 数据的存储方式会影响效率&#xff0c;算法的优劣也会影响效率 什么是算法&#xff1f; 定义&#xff1a; &#x1f7e2; 一个有限指令集&#xff0c;每条指令的描述不依赖于言语…

UE5、CesiumForUnreal接入WMTS格式地图瓦片,如ArcGIS、Mapbox、天地图

文章目录 1.实现目标2.实现过程2.1 WMTS与TMS2.2 cesium-native改造2.3 CesiumForUnreal插件改造2.4 WMTS瓦片加载测试2.5 EPSG:3857与43263.参考资料1.实现目标 通过改造cesium-native和CesiumForUnreal插件,参考tms的栅格瓦片地图加载逻辑,实现在UE5中通过CesiumForUnreal…

2023-08-10 monetdb-函数monetdbe_query_internal-分析

摘要: 严格上来说monetdbe_query_internal不仅仅是查询执行函数, query这个名字有点误导人.这个函数做的事情可以囊括了一个数据库的查询查询执行的核心环节. 本文对该函数进行分析, 以深化对数据库查询之心的理解. 函数定义: static char* monetdbe_query_internal(monetdbe…