vuex的使用封装

前言

相信做前端的同学,肯定是避免不了使用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~