vue.js状态管理之vuex中的...mapGetters(['user'])使用方法介绍

发布于 2021-03-20 20:51:51

下面是我开发苹果cms v10 vue项目中的用户登录前后信息渲染对比,这个知识点容易忘记,特别发个帖子做一下记录。

store/index.js
的代码


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {

    user:{
        "user_id": 0,
        "group_id": 0,
        "user_name": "未登录",
        "user_portrait": "",
        "user_points": 0,
        "group": {"group_id": 0,"group_name": "游客"},
    },
  },
  mutations: {
     setUser(state, value) {
         state.user = value;
     },
  },
  getters:{
      user(state){
        return  state.user;
      }
  },
  actions: {
 
  },
  modules: {
      
  }
 
})

export default store

user.vue
在计算属性中使用 mapGetters(['user']),然后就可以直接在页面模板中使用 这个 user 对象了,只有vuex中有任何变动,页面上的 user 都是实时渲染,适合做登录前后的信息对比。

<template>
    <div>
      <p>用户名:{{user.user_name}}</p>  
   </div>
</template>

<script>
   //引入vuex
   import {
      mapGetters
   } from 'vuex';
    export default {
        data()
        {
            return{
                
            }
        },
      computed: {
         //在计算属性中使用
           ...mapGetters(['user']),
       },
        
    }
</script>

<style scoped>
 
</style>

其实这个 ...mapGetters(['user']) 在计算属性中最终会演变为,只是简化了语法,不少新手对这一部分不是很理解。

computed: {
      user() {
        return this.$store.state.user
      }
 }
0 条评论

发布
问题