vuex+localStorage实现最基础的登录状态管理

默认已安装了Vuex，包含存储token/清除token/计算登录状态，不包含验证token

在main.js引入vuex

import Vuex from 'vuex';

Vue.use(Vuex);

new Vue({
  el: '#app',
  router,
  store, //将store注入根节点
  components: {App},
  template: '<App/>'
});

在src/目录下新建store文件夹

新建四个js文件，如下图：

编写index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  getters
})

编写state.js

// 如果本地缓存里有token，就将token赋值
let defaultToken = ''
try {
  if (localStorage.token) {
    defaultToken = localStorage.token
  }
} catch (e) {}

export default {
  token: defaultToken
}

编写mutation.js

export default {
  changeToken (state, token) {
    //登录或者注册时，存储token的方法
    state.token = token
    try {
      localStorage.token = token
    } catch (e) {}
  },
  clearToken (state) {
    //退出登录时清除token的方法
    localStorage.token = ''
    state.token = ''
  }
}

编写getters.js

export default {
  login: state => {
    // 计算登录状态，返回一个boolean值
    return state.token !== ''
  }
}

调用

调用有两种方式，一种是访问挂载在根节点的$store

console.log(this.$store.state.token); //打印token值
console.log(this.$store.getters.login); //打印login值
this.$store.commit('clearToken'); // 清除token值

第二种是使用vuex对应的三个辅助函数

mapState mapMutations mapGetters
这三个辅助函数的作用是将vuex内的变量和方法映射为组件内变量和方法

// 在组件内引入
import { mapState,mapMutations,mapGetters } from 'vuex'

computed: {
    ...mapState(['token']), // 可以直接使用this.token访问
    ...mapGetters(['login']) //同上
}

methods: {
    ...mapMutations(['clearToken']) // 使用this.clearToken调用
}

验证token

如果你需要验证token的话，需要自行写一个js，调用接口验证token，如果token无效则clearToken，在入口页面调用这个方法，这里的流程不再贴上来，需要的朋友可以自行尝试。

总结

Vuex由三个部分组成：

• state
  管理变量，只读属性，由store.state.xx读取
• mutation
  操作变量，由store.commit('xx')触发
• getters
  计算变量，通过store.getters.xx访问

以及三个对应的辅助函数

• mapState
• mapMutations
• mapGetters

如果不使用localStorage而是使用cookie来存储token，就不存在验证token这一步了，但很多时候由于服务器端HttpOnly的限制，js获取不到cookie，这里建议先使用localStorage来实现，后续再跳坑。