Vuex的使用记录

分模块时候的使用

带上模块名称有点迷，记录备用

在vuex中的配置

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './Modules/user'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    user,
  },
})

模块内容 store/modules/user.js

const state = () => {
  return {
    userinfo: {
      username: '',
      token: '',
      auth: [],
    },
  }
}
const mutations = {
  // 设置用户信息
  setUser(state, value) {
    state.userinfo = value
  },
  // 退出登录，清空session
  clearUser(state) {
    state.userinfo.username = ''
    state.userinfo.token = ''
    state.userinfo.auth = []
  },
}
const actions = {}
const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
}

在组件中使用

import { mapState } from 'vuex'

computed: {
    // 获取用户菜单权限列表 - 直接获取
    // auth() {
    //   return this.$store.state.user.userinfo.auth
    // },
    // 获取用户菜单权限列表 - 对象的方法获取
    // ...mapState('user', {
    //   auth: state => state.userinfo.auth,
    // }),
    // 获取用户菜单权限列表 - 数组的方法获取
    ...mapState('user', ['userinfo']),
  },