啥是Vuex

簡單來說是用來存放一些狀態的地方，你可以讀取、監聽、修改這些值。
例如你在A頁打了一支API做登入，那使用者的狀態就變了，可能同時有幾個components要對應做頁面調整，顯示會員的功能之類，就可以用這個Vuex來做控制。

來建一個store
src/store/modules/user.js

const state = () => ({
    info: {
        id: "",
        name: "Guset", // 預設是遊客
        isLogin: false // 還沒登入
    },
  })
  
  // 這可以用來寫一些取值的function，需要邏輯運算的
  const getters = {
  }
  
  // Action是提交mutation不會直接更新state
  const actions = {
    // 登入
    login ({ commit }, payload) {
      let info = {
          id: payload.id,
          name: payload.name,
          isLogin: true
      }
      commit('setUserInfo', { items: info })
    },
    // 登出
    logout ({ commit },) {
      let info = {
          id: "",
          name: "Guset",
          isLogin: false
      }
      commit('setUserInfo', { items: info })
    }
  }
  
  const mutations = {
    // 更新state的值
    setUserInfo (state, { items }) {
      state.info = items
    },
  }
  
  export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
  }

把這個user store import進來
src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  },
  strict: true
})

登入成功時更新store

views/App.vue

// 更新user store
if (resp.data.data.is_login === true) {
  self.$store.dispatch('user/login', {
    id: resp.data.data.user_id,
    name: resp.data.data.user_name,
  })
}

取得狀態

views/App.vue

import { mapState } from 'vuex'

  computed: {
    // 當store值一更變，這邊也會自動更新
    ...mapState({
      userState: state => state.user.info
    }),
  },

這樣就可以用來做權限的控管囉

<b-nav-item-dropdown right>
  <template v-slot:button-content>
    <em>{{userState.name}}</em> <!--顯示會員名稱-->
  </template>
  <!-- 如果還沒登入就顯示Sign In -->
  <b-dropdown-item v-if="!this.userState.isLogin" v-b-modal.modal-1>Sign In</b-dropdown-item>
  <!-- 如果還登入了就顯示Sign Out -->
  <b-dropdown-item v-else v-on:click="logout">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>

已登入的狀態~

今天的commit

謝謝大家~