Vuex的五个核心概念

state, getters, mutations, actions, modules。

• 　1. state：vuex的基本数据，用来存储变量

• 　2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

• 　3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

• 　4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

• 　5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

  　　使用下面这两种方法存储数据： dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值)　　commit：同步操作，写法：this.$store.commit('mutations方法名',值)

  或者
  import {mapGetters,mapMutations,mapState,mapAction} from 'vuex'    其中mapMutations和mapAction
  在methods进行扩展出来...mapAction(["one","two"]/{"one":"o1","two":"t2"})  ，
  mapGetters和mapState
  在computed中进行扩展...mapState(['num']) ...mapGetters(['userInfo'])
  

使用场景：

vuex 更多地用于解决跨组件通信以及作为数据中心集中式存储数据。 

对于多层级组件嵌套等较为复杂的场景，使用 vuex 能更好地应对

 1、组件之间全局共享的数据 

2、通过后端异步请求的数据 可能是为了解决多层嵌套组件之间的通信问题，或是为了更好地管理应用中错综复杂的状态关系

// 引入封装好的 登录的model 函数
import doLogin from '@/api'

export default {
    namespaced: true,
    state: {
         // 用户信息利用缓存备份防止刷新 取值时判断缓存获取
         // 用户的基础信息 如nickName昵称和avatar用户头像
        userInfo: localStorate.getItem('userInfo')
           ?
            JSON.parse(localStorate.getItem('userInfo'))
           :
            {}
        ,
        // 登录返回的token 秘钥
        token: localStorage.getItem('token') || '', 
        // 当前用户的角色
        role: localStorage.getItem('role') || '', 
        // 所有的导航 以下是示例
        menus: [
          // 每个导航 新增roles属性 代表可以访问当前用户的所有的角色
          {
            label: '仪表盘',
            path: '/dashBoard',
            roles: ['admin', 'a', 'b', 'superAdmin'],
            icon: 'el-icon-s-data'
          },
          {
            label: '商品管理',
            path: 'el-icon-s-goods',
            icon: 'el-icon-s-data',
            roles: ['admin', 'a', 'b', 'superAdmin']
          },
          {
            label: '个人中心',
            path: '/user',
            roles: ['admin', 'a', 'b', 'superAdmin'],
            icon: 'el-icon-user-solid'
          },
          {
            label: '设置',
            path: '/setting',
            roles: ['a', 'b', 'superAdmin'],
            icon: 'el-icon-s-tools'
          }
        ]
    },
    getters: {
        authMenus (state) {
            // 定义getters 过滤当前用户的role不能访问的导航
            // 这就是当前用户role可以访问的导航
            return state.menus.filter(menu=> menu.roles.includes(state.role))
        }
    },
    mutations: {
        INIT_LOGIN (state, {userInfo, token, role}) {
           // 登录成功 存储 用户信息
            state.userInfo = userInfo
            state.token = token
            state.role = role
            // 缓存起来防止刷新 vuex状态丢失
            localStorage.setItem('userInfo', JSON.stringify(userInfo))
            localStorage.setItem('token', token)
            localStorage.setItem('role', role)
        }
    },
    actions: {
        DO_LOGIN ({commit}, params) {
            // action中发送请求进行登录
            doLogin(params).then(res => {
                if(res.data.code === 200) {
                    // 请求成功触发mutation存储用户信息 包括role
                    commit('INIT_LOGIN', {
                        userInfo: res.data.data.userInfo,
                        token: res.data.data.token,
                        role: res.data.data.role
                    })
                }
            })
        }
    }
}https://juejin.cn/post/7102233008433791012