前言
相信做前端的同学,肯定是避免不了使用vue的,在vue项目中,总会有各种传值,稍稍复杂一点的用单纯的父子传值可以说是相当麻烦,这个时候,我们就会想到vuex,vuex帮我们做到了各个组件传值,实现数据共享,随用随取,博主也是刚入行前端不久,把自己用过的东西记录下来,希望对大家有所帮助,针对于vuex有一定基础的童鞋
环境和简介
利用webpack安装vue的手脚架,并安装vuex插件
vuex的作用是将所有项目中需要用到的变量存在一个仓库里面,可以对其中的数据进行读取修改等操作,实现全局响应式改变
vuex 结构
state: 简称 仓库 存放所有变量
mutations: 存放同步读取、修改state的的方法
action: 存放异步读取、修改state的的方法
getter: 是store的计算属性,
编写store文件
话不多说,直接上代码,在这里,我是将vuex进一步进行了封装,使得开发时更方便,
在src 下面直接创建store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userInfo: {}, //用户信息
otherInfo: {}, //其他信息
},
getters: {
getUserInfo(state) {
//获取用户信息
return state.userInfo;
},
getOtherInfo(state) {
//获取其他信息
return state.otherInfo;
},
},
mutations: {
setUserInfo(state, value) { //设置用户信息
for (let key in value) {
Vue.set(state.userInfo, key, value[key]);
}
let time = new Date();
Vue.set(state.userInfo, "lastTime", {
date: time.toLocaleString(),
second: time.getTime()
});
},
deleteUserInfo(state, value) {
Vue.delete(state.userInfo, value.key);
},
setOtherInfo(state, value) { //设置其他信息
for (let key in value) {
Vue.set(state.otherInfo, key, value[key]);
}
let time = new Date();
Vue.set(state.otherInfo, "lastTime", {
date: time.toLocaleString(),
second: time.getTime()
});
},
deleteOtherInfo(state, value) {
Vue.delete(state.otherInfo, value.key);
},
clearVuex(state) {
state.userInfo = {};
state.otherInfo = {};
}
},
actions: {
upVuex(context, data) { //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
context.commit(data.mutations, data.value);
}
}
})
上述是所有的代码,
第一步引入vue vuex并注册
在这里面,我将所有的信息分为两大部分,一部分是用户信息,我是把登陆信息存到这里面,一部分是其他信息,大家可以灵活使用
对应的mutations里面有对这两个对象设置和删除信息的方法,以及记录下了每此更新的时间
项目中使用
在src下面新建myminxin.js文件,对vue 混入不了解的童鞋,请戳https://cn.vuejs.org/v2/guide/mixins.html
let m = {
computed : {
userInfo () {
return this.$store.getters.getUserInfo;
} ,
otherInfo () {
return this.$store.getters.getOtherInfo;
} ,
} ,
watch : {
} ,
methods : {
deleteOtherInfo ( k ) {
//删除其他的信息
this.$store.dispatch ( "upVuex" , {
mutations : "deleteOtherInfo" ,
value : {
key : k
}
} );
} ,
setOtherInfo ( v ) {
//设置其他的信息
this.$store.dispatch ( "upVuex" , {
mutations : "setOtherInfo" ,
value : v
} );
} ,
deleteUserInfo ( k ) {
//删除用户的信息
this.$store.dispatch ( "upVuex" , {
mutations : "deleteUserInfo" ,
value : {
key : k
}
} );
} ,
setUserInfo ( v ) {
//设置用户的信息
this.$store.dispatch ( "upVuex" , {
mutations : "setUserInfo" ,
value : v
} );
} ,
}
};
export default m;
myminxin也需要在项目中引入,可以全局在main.js中引入,也可以按需导入,导入之后,我们就不需要在每个.vue文件中单独引入vuex
使用方法:
let obj = {name:'张三'}
//存数据
this.setUserInfo({'obj':obj})
//取数据
let name = this.userInfo.obj.name
console.log(name) //张三
//删除
this.deleteUserInfo('obj')
vuex的封装就到此完毕,但是,使用过vuex的童鞋都知道,刷新的时候数据会消失,针对于不同的业务需求,我在项目中也做了处理,大概思路就是在home页中监听刷新屏幕的事件,及时存在本地存储中,然后去全局路由钩子中判断,如果进入login页面,就不需要重新赋值了,如果是非login页面,把本地的值又赋值给vuex,这样vuex结合本地存储,就能很完美的做到数据的存储,传值也变得简单起来
贴贴代码:
//布局页面
methods : {
beforeunloadFn ( e ) {
setLocal ( "userMemory" , {
userInfo : this.userInfo ,
otherInfo : this.otherInfo ,
} );
// let confirmationMessage = "";
// ( e || window.event ).returnValue = confirmationMessage; // Gecko and Trident
// return confirmationMessage;
}
} ,
mounted () {
// this.resizeHandler();
//beforeunload事件在当页面卸载（关闭）或刷新时调用
// window.addEventListener("resize", this.resizeHandler);
window.addEventListener ( "beforeunload" , this.beforeunloadFn , true );
} ,
beforeDestroy () {
// window.removeEventListener("resize", this.resizeHandler);
window.removeEventListener ( "beforeunload" , this.beforeunloadFn , true );
}
图上用到的setLocal,getLocal方法就是本地存储存取,代码如下
export function setLocal(key, val) {
let ls = window.localStorage;
let allLoacl = getLocal("allLoacl");
if (allLoacl == null) {
let nullObj = {};
nullObj[key] = val;
ls.setItem("allLoacl", JSON.stringify(nullObj))
}
else {
allLoacl[key] = val;
ls.setItem("allLoacl", JSON.stringify(allLoacl));
}
// }
}
export function getLocal(key, value) {
if (value == undefined) {
value = {}
}
let ls = window.localStorage;
try {
let data = JSON.parse(ls.getItem("allLoacl"));
if (data == null) {
return value;
} else if (key === "allLoacl") {
return data;
} else if (!!data[key] && data[key] != undefined) {
return data[key];
} else {
return value;
}
} catch (error) {
return value;
}
}
路由钩子里面代码,具体判断路由都省了,这里只添加重新赋值vuex的代码
//引入store
import store from './store';
let userMemory = getLocal ( "userMemory" );
store.dispatch ( "upVuex" , {
mutations : "setUserInfo" ,
value : userMemory.userInfo
});
store.dispatch ( "upVuex" , {
mutations : "setOtherInfo" ,
value : userMemory.otherInfo
});
到此,vuex结合本地存储全部完毕,个人拙见,有错误或好的想法欢迎指出!
附言:
基于vue+element 的后台管理框架
GitHub: https://github.com/wxyfc/management-system
网址: https://wxyfc.github.io/management-system/#/login，账号:admin 密码:admin 直接点击登录即可
如果对您有帮助请点个小星星哦,谢谢,mua~
网友评论