vuex的使用封装

前言

在使用vue进行项目开发时，使用组件化开发，难免会遇到各种的传值，复杂的组件之间使用父子组件之间的传值相当麻烦，这个时候，

我们就会想到用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);
    }
  }
})

以上时store.js里面所有的代码

首先是先引入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;

myminmin也需要在项目中引入，可以全局在main.js中引入，也可以按需导入，导入之后，我们就不需要再每个组件中单独引入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，

这样结合本地存储，就可以完美的做到数据存储，传值也变得更见简单。

贴下代码

export default {
  //布局页面
  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结合本地存储全部完毕,有错误或好的想法欢迎指出!

转载：https://www.jianshu.com/p/739efe7f3472