vuex的使用封裝

前言

相信做前端的同學,肯定是避免不了使用vue的,在vue項目中,總會有各種傳值,稍稍復雜一點的用單純的父子傳值可以說是相當麻煩,這個時候,我們就會想到vuex,vuex幫我們做到了各個組件傳值,實現數據共享,隨用隨取,博主也是剛入行前端不久,把自己用過的東西記錄下來,希望對大家有所幫助,針對于vuex有一定基礎的童鞋

環(huán)境和簡介

利用webpack安裝vue的手腳架,并安裝vuex插件

vuex的作用是將所有項目中需要用到的變量存在一個倉庫里面,可以對其中的數據進行讀取修改等操作,實現全局響應式改變

vuex 結構

state: 簡稱倉庫存放所有變量
mutations: 存放同步讀取违帆、修改state的的方法
action: 存放異步讀取溉知、修改state的的方法
getter: 是store的計算屬性,

編寫store文件

話不多說,直接上代碼,在這里,我是將vuex進一步進行了封裝,使得開發(fā)時更方便,

在src 下面直接創(chuàng)建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) { //自定義觸發(fā)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的童鞋都知道,刷新的時候數據會消失,針對于不同的業(yè)務需求,我在項目中也做了處理,大概思路就是在home頁中監(jiān)聽刷新屏幕的事件,及時存在本地存儲中,然后去全局路由鉤子中判斷,如果進入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~