Vue 求和案例优化 1.0（Day45）

一只聪明漂亮的小可爱

2023-06-09 24 阅读1分钟

求和案例优化

映射数据

index.js文件

const state = {
    sum: 0,
    school:'测试',
    subject:'前端'
}
// 准备getters 用于将state中的数据进行加工
const getters={
    bigSum(state){
        return state.sum*10
    }
}

state中的数据

程序员独立写计算属性

                sum(){
                    return this.$store.state.sum
                },
                school(){
                    return this.$store.state.school
                },
                subject(){
                    return this.$store.state.subject
                },

借助mapState生成计算属性，从state中读取数据（对象写法）
```
...mapState({sum: 'sum', school: 'school', subject: 'subject'}),
```
借助mapState生成计算属性，从state中读取数据（数组写法）
- 要求：生成的计算属性名与state中属性名相同
```
...mapState(['sum', 'school', 'subject']),
```

getters中的数据

程序员独立写计算属性

        bigSum() {
            return this.$store.getters.bigSum
        },

借助mapGetters生成计算属性，从getters中读取数据（对象写法）
```
...mapGetters({bigSum: 'bigSum'}),
```
借助mapGetters生成计算属性，从getters中读取数据（数组写法，要求与mapState相同）
```
...mapGetters(['bigSum'])
```