Vue学习记录-状态管理

要解决的问题

平时的系统开发中，基本都会碰到这个权限问题，需要根据用户的登录状态进行处理。最常见的情况就是“先登录，后使用”。除去打包成APP，无法看到连接外，如果地址栏里直接输入地址就能绕过登录的话，那就忒不安全了。

方案1：自己做一个状态管理

具体的代码，我删掉了，所以这里只陈述一下过程

1. main.js里面，加一个var user = {didLogin:false}，并在methods中添加一个方法changeUserAuth(isLogin){ user.didLogin = isLogin; }；

2. main.js里面，添加路由beforeEach，通过判断user.didLogin，进行next()或者next({name:'login})；

3. 子页面中如果要修改这个状态的话，通过方法进行修改，this.$root.changeUserAuth(true)；

方案2：vuex

正规军的做法，就是vuex了，通过他统一对全局变量进行管理。说一下具体的用法

1. 安装

　　npm i vuex --save

2. 创建store.js（/ProjectPaht/src/vuex/store.js），并定义types（/ProjectPaht/src/vuex/types.js）

/*  store.js  */

import Vue from 'vue'

import Vuex from 'vuex'

import user from './modules/user'  //用户

Vue.use(Vuex)

export default new Vuex.Store({

  modules: {

    user,

  }

})

/*  types.js  */

// 用户权限

export const USER_INFO_UPDATE = 'USER_INFO_UPDATE';

3. 定义各个模块的数据（user.js）

import * as types from '../types'

const USER_INFO = 'userInfo';

const state = {

  // 用户登录信息

  userInfo: JSON.parse(localStorage.getItem(USER_INFO) || '{}'),

}

const actions = {

  /**

   * 用户登录

   */

  userLogin({commit}, res) {

    localStorage.setItem(USER_INFO, JSON.stringify(res));

    commit(types.USER_INFO_UPDATE, res);

  },

  /**

   * 退出登录

   */

  userLogout({commit}) {

    localStorage.removeItem(USER_INFO);

    commit(types.USER_INFO_UPDATE, {});

  },

}

const getters = {

  userInfo: state => state.userInfo,

  didLogin: state => state.userInfo.userid.length > 0,

}

const mutations = {

  [types.USER_INFO_UPDATE](state, res) {

    state.userInfo = res

  },

}

export default {

  state,

  actions,

  getters,

  mutations

}

3. 更改store数据

<script>

  ...

  import {mapActions} from 'vuex';

  export default {

    ...

    methods: {

      ...mapActions({

        userLogin: 'userLogin',  //vues/modules/user.js中定义的方法

        userLogout: 'userLogout'

      }),

      // 登录

      onPressLogin: function () {

        let param = {

          username: this.username,

          password: this.password,

        }

        api.POST('api/account/login', param).then(data=> {

          let user = {userid:'wzf'}; //data.data;

          // 更新state

          this.userLogin(user);

          // 页面跳转

          this.$router.push({name: 'home'});

        });

      }

    }

  }

</script>

页面跳转以后，就会执行到main.js的路由beforeEach中去了

...

import router from './router'

import store from './vuex/store'

import {mapState} from 'vuex'

new Vue({

  el: '#app',

  router,

  store,

  template: '<App/>',

  components: {

    App,

  },

  computed: mapState({

    userInfo: ({user}) => user.userInfo, //从user.js中获取信息用于判断是否登录

  }),

  methods: {

    checkAuth: function () {

      let {userid = ''} = this.userInfo;

      return userid.length > 0; //这里做的比较简单，只是通过userid进行的判断

    }

  }

})

router.beforeEach((to, from, next) => {

  // 如果不是登录页面

  if (to.name != 'login') {
　　 if (!router.app.checkAuth()) {

      next({name: 'login'});

      return;

    }

  }

  next();

});

最后理一下数据流向

1. 页面通过接口调用接口，完成账号验证；

2. 通过vuex修改store，这里具体起作用的是vuex/modules/user.js；

3. 进行页面跳转，会被router.beforeEach拦截，通过对store的判断，具体完成跳转（到登录、到下个页面）

因为之前用了Redux，所以vuex直接就用上了，没有任何难度。关于vuex的具体用法，还是参照一下官方文档吧 https://vuex.vuejs.org/

巴特西