项目中getter的用法（解构）

仿登录的时候，拿到用户信息，改变state里的数据，再计算调用该数据

store目录结构

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  state,
  getters,
  mutations
})

export default store

state.js 存放数据

export default {
  userInfo: '',
  userStatus: '', // 0 普通, 1 VIP, 2 高级VIP
  vipLevel: ''
}

mutation.js 接收改变数据

export default {
  login (state, v) {
    state.userInfo = v
  },
  setMemberInfo (state, v) {
    state.userStatus = v.userStatus
    state.vipLevel = v.vipLevel
  }
}

getters.js 像计算属性

export default {
  memberInfo (state) {
    switch (state.userStatus) {
      case 0:
        return '普通会员'
      case 1:
        return 'vip会员'
      case 2:
        return `高级V${state.vipLevel}会员`
      default:
        return '普通会员'
    }
  }
}

获取用户信息，改变state里的数据

login.vue

<button @click="login">登录</button>

login: function () {
  // 改变state里的值 this.$store.commit('mutations方法名',值)
  this.$store.commit('setMemberInfo', {
    userStatus: 1,
    vipLevel: 0
  })
  this.$router.push('/') // 跳首页
}

在页面中计算调用该数据

方法一）直接调用
index.vue

 <!-- 获取getters里计算过的数据 -->
 <span>{{this.$store.getters.memberInfo}}用户</span>

方法二）解构获取
index.vue

<!-- 获取getters里计算过的数据 -->
<span>用户名{{userInfo.username}}</span>
<span>{{memberInfo}}用户</span>
<button @click="goLogin">跳登录页</button>

import { mapGetters, mapState } from 'vuex' // 1）引入map

computed: {
   // 2）解构map
   ...mapState(['userInfo', 'userStatus', 'vipLevel']),
   ...mapGetters(['memberInfo'])
 }