vuex Getters基本用法

一.什么是getters
vuex中的getters用於對state中存儲的數據進行過濾操作。
比如等級：假設1代表初級，2代表中級，3代表高級。在state中存儲level值為1或2或3.想在頁面中獲取對應等級就需要進行轉換。此時就需要用到getters。

二.使用getters
1.在store文件夾下創建getters.js文件,並在index下引入

 

 2.在state.js增加userStatus

 其中userStatus代表等級，0為普通會員，1為vip會員，2為高級會員
3.getters代碼如下，對userStatus進行轉換

const getters ={
    memberInfo(state){
        switch (state.userStatus) {
            case 0:
                return "普通會員"
                break;
            case 1:
                return "vip會員"
                break;
            case 2:
                return "高級會員"
                break;
            default:
                break;
        }
    }
}
export default getters;

補充一種比較常見的寫法：
const getters = {
    name: state => state.user.name
    avatar: avatar => state.user.avatar
}
export default getters;

此時控制台會展示

 4.界面中獲取userLevel的值

<h1>{{ $store.getters.memberInfo }}</h1>

vuex中提供了更簡單的獲取方法：