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來實現，後續再跳坑。