vuex存取数据

vuex存取数据

存数据

// src/store/modules/user.js
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
}

// src/store/getters.js
const getters = {
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}
export default getters

// src/store/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'
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>

// Navbar.js
import { mapGetters } from 'vuex'
export default {
    computed: {
    ...mapGetters([
      'name',
      'avatar'
    ])
  }
}