vuex存取数据
存数据
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: ''
}
}
const state = getDefaultState()
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
}
}
const actions = {
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
reject('Token验证失败,请重新登录.')
} else {
const { userName, avatar, mobile } = data
if (!userName) {
commit('SET_NAME', mobile)
} else {
commit('SET_NAME', userName)
}
const avatarStr = avatar || './avatar.png'
commit('SET_AVATAR', avatarStr)
session.set(data)
resolve(data)
}
}).catch(error => {
reject(error)
})
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
const getters = {
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name
}
export default getters
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'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user
},
getters
})
export default store
使用数据
// Navbar.html
<div class="text-avatar" style="cursor: pointer">
<div class="right-menu" style="cursor: pointer">
<el-avatar :src="avatar" />
</div>
<div class="right-text" style="cursor: pointer">
<div class="user-name">{{ name }}</div>
</div>
</div>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'name',
'avatar'
])
}
}