[筆記] Vue 的狀態管理 Vuex 實作心得 @地瓜大的飛翔旅程

章節連結

語法
其他 Vue.js 相關文章

Vuex 是 Vue 中用於狀態管理的工具，你可以將每個頁面、元件都會用到的「狀態」(像是：登入的使用者資料)，儲存在前端使用者的瀏覽器中。因為在頁面的切換中，並不會每次都向後端伺服器認證你的使用者訊息。若每個 .vue 檔案的狀態不能共用的話，在頁面切換時登入狀態就會被清除掉，讓使用者的體驗出現斷層。Vuex 就是用來解決這問題的工具，你只需要寫好會共用的方法在 Vuex 內，在每個 .vue 呼叫即可。

語法

1. Store/index.js 的檔案內容

// 1. 安裝 vue router and vuex
npm i vue-router vuex
// 2. 在 store/index.js 裡頭新增每個 .vue 檔案都會用到的方法，像是登入狀態
// state 為預設狀態；mutations 內放置前端登入後的儲存值；actions 放置每一個 .vue 所需要的認證方法
import Vue from 'vue'
import Vuex from 'vuex'
import usersAPI from '../apis/users'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentUser: {
      id: -1,
      name: '',
      email: '',
      isAdmin: false
    },
    isAuthenticated: false
  },
  mutations: {
    setCurrentUser(state, currentUser) {
      state.currentUser = {
        ...state.currentUser,
        ...currentUser
      }
      state.isAuthenticated = true
    },
    revokeAuthentication(state) {
      state.currentUser = {}
      state.isAuthenticated = false
      localStorage.removeItem('token')
    }
  },
  actions: {
    async fetchCurrentUser({ commit }) {
      try {
        const { data, statusText } = await usersAPI.getCurrentUser()
        if (statusText !== 'OK') {
          throw new Error(statusText)
        }
        // change the state by commit and the response
        commit('setCurrentUser', {
          id: data.user.id,
          name: data.user.name,
          email: data.user.email,
          isAdmin: data.user.isAdmin
        })
        return true
      } catch (err) {
        console.log('error', err)
        return false
      }
    }
  }
})

// 1. 安裝 vue router and vuex

npm i vue-router vuex

// 2. 在 store/index.js 裡頭新增每個 .vue 檔案都會用到的方法，像是登入狀態

// state 為預設狀態；mutations 內放置前端登入後的儲存值；actions 放置每一個 .vue 所需要的認證方法

import Vue from 'vue'

import Vuex from 'vuex'

import usersAPI from '../apis/users'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

currentUser: {

id: -1,

email: '',

isAdmin: false

isAuthenticated: false

mutations: {

setCurrentUser(state, currentUser) {

state.currentUser = {

...state.currentUser,

...currentUser

}

state.isAuthenticated = true

revokeAuthentication(state) {

state.currentUser = {}

state.isAuthenticated = false

localStorage.removeItem('token')

}

actions: {

async fetchCurrentUser({ commit }) {

try {

const { data, statusText } = await usersAPI.getCurrentUser()

if (statusText !== 'OK') {

throw new Error(statusText)

}

// change the state by commit and the response

commit('setCurrentUser', {

id: data.user.id,

email: data.user.email,

isAdmin: data.user.isAdmin

})

return true

} catch (err) {

console.log('error', err)

return false

}

})

2. SignIn.vue

/* store token in localStorage */
localStorage.setItem("token", data.token);
/* 將資料傳到 Vuex 中，這個對應 mutations 中的 setCurrentUser 方法 */
this.$store.commit("setCurrentUser", data.user);

/* store token in localStorage */

localStorage.setItem("token", data.token);

/* 將資料傳到 Vuex 中，這個對應 mutations 中的 setCurrentUser 方法 */

this.$store.commit("setCurrentUser", data.user);

3. 在每個 .vue 中取用

// 在每個 .vue 啟用
<script>
  import { mapState } from "vuex";
  export default{
    computed:{
      ...mapState(["currentUser", "isAuthenticated"]) //取得state物件中的 currentUser 和 isAuthenticated
    }
  }
</script>

// 在每個 .vue 啟用

import { mapState } from "vuex";

export default{

computed:{

...mapState(["currentUser", "isAuthenticated"]) //取得state物件中的 currentUser 和 isAuthenticated

}

</script>

4. 路由權限設定

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store'

const authorizedAdmin = (to, from, next) => {
  const currentUser = store.state.currentUser
  if (currentUser && !currentUser.isAdmin) {
    next('/404')
    return
  }
  next()
}

const routes = [
  ...,
  {
    path: '/admin/users',
    name: 'adminUsers',
    component: () => import('../views/AdminUsers'),
    beforeEnter: authorizedAdmin
  },
  ...
]

router.beforeEach(async (to, from, next) => {
  const tokenInStore = store.state.token
  const tokenInLocalStorage = localStorage.getItem('token')
  let isAuthenticated = store.state.isAuthenticated
  // compare the difference between the local and the store
  // if true, fetchCurrentUser
  if (tokenInLocalStorage && tokenInLocalStorage !== tokenInStore) {
    isAuthenticated = await store.dispatch('fetchCurrentUser')
  }
  // exclude signUp page
  const pathsWithoutAuthentication = ['signUp']
  if (pathsWithoutAuthentication.includes(to.name)) {
    next()
    return
  }
  // if user is not authenticated, redirect to signin
  // signin page should be excluded!
  if (!isAuthenticated && to.name !== 'signIn') {
    next('/signin')
    return
  }
  next()
})

export default router