技術標籤：vue前端面試vue

vuex

定義：vuex是vue設立的一個共享資料狀態機制，簡單來說我們可以多個頁面需要的同個資料放在vuex這個機制裡面，以便我們呼叫，就不需要利用傳統元件傳值及事件匯流排來對資料進行共享

以下程式碼專案程式碼，不建議初學者看

首先對vuex進行模組化封裝及引用

user模組程式碼

import { setToken, getToken, removeToken, setTimeStamp, removeTimeStamp } from '@/utils/auth'
import { login, getInfo as getUserInfo, getUserDetailById }
 
 from '@/api/user'
import { Message } from 'element-ui'
import { resetRouter } from '@/router'
export default {
  namespaced: true,
  state: {
    token: getToken(),
    userInfo: {}
  },
  mutations: {
    setToken(state, payload) {
      state.token = payload
      setToken(payload)
    },
    setUserInfo
 
(state, payload) {
      state.userInfo = payload
    },
    removeToken(state) {
      removeToken()
      state.token = ''
    },
    removeUserInfo(state) {
      state.userInfo = {}
    }
  },
  actions: {
    login(context, payload) {
      return login(payload).then(data => {
        Message.
 
success('登入成功')
        setTimeStamp()
        context.commit('setToken', data)
      }).catch(err => {
        console.dir(err)
      })
    },
    'getUserInfo': async(context, payload) => {
      const aiqi1 = await getUserInfo(payload)
      const aiqi2 = await getUserDetailById(aiqi1.userId)
      const userInfo = { ...aiqi1, ...aiqi2 }
      context.commit('setUserInfo', userInfo)
      console.log(userInfo)
      return userInfo
    },
    // 登出功能
    // 刪除token資料
    // 刪除使用者資料
    logout({ commit }) {
      commit('removeToken')
      commit('removeUserInfo')
      removeTimeStamp()
      resetRouter()
      commit('permission/setRoutes', [], {
        root: true
      })
    }
  }
  // getUserDetailById(context, payload) {
  //   return getUserDetailById(payload).then(data => {

  //   })

  // 'getUserInfo':async(context)=>{
  //   const data = await getUserInfo()
  //   context.commit('setUserInfo', data)
  // },
  // async getUserInfo(context) {
  //   const data = await getUserInfo()
  //   context.commit('setUserInfo', data)
  // }
}

getters程式碼

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  userInfo: state => state.user.userInfo,
  name: state => state.user.userInfo.username,
  userId: state => state.user.userInfo.userId,
  staffPhoto: state => state.user.userInfo.staffPhoto
}
export default getters

最後在index.js中對各個模組進行引用

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import permission from './modules/permission'
import tagsView from './modules/tagsView'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    permission,
    tagsView
  },
  getters
})

export default store

對此文章有其他見解可留言作者