Vuex は、mapState を通じてステート内のオブジェクトのフィールドを正確に取得します。

vuex で書かれたパブリック データを
渡すことができることは誰もが知っています。

import {
    
     mapState } from 'vuex'
export default {
    
    
     computed:{
    
    
	    ...mapState(['dom'])
	  }
}

このメソッドは、現在のコンポーネントの計算されたプロパティですぐに定義されます
が、オブジェクトを保存し、そのフィールドの 1 つだけが必要な場合、この方法で記述するのは非常に面倒です。

たとえば、
token と userInfo という 2 つのフィールドを持つ vuex の状態でユーザー オブジェクトを定義すると、
次のように記述できます。

import {
    
     mapState } from 'vuex'
export default {
    
    
     computed:{
    
    
	    ...mapState(['user'])
	  }
}

このようにして、コンポーネント内の this.user からオブジェクトを直接取得できます。
では、user の下の userInfo のみが必要な場合はどうなるでしょうか?
ユーザーを取得してから userInfo に行くと思う人もいるかもしれませんが、大丈夫ではないでしょうか。
はい、しかし、もっと良い解決策があります
。

import {
    
     mapState } from 'vuex'

export default {
    
    
  ...mapState({
    
    
    userInfo: state => state.user.userInfo
  }),
}

このようにして、値が user under state の userInfo から取得される計算プロパティ userInfo を定義する
ことで、コードも読みやすくなります。