markdown的基本使用方法
阿新 • • 發佈:2020-12-25
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
對此文章有其他見解可留言作者