vuex中...mapstate和...mapgetters的区别及说明

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

...mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

computed: {
  count() {
    return this.$store.state.count
  },
  name() {
    return this.$store.state.name
  },
  age() {
    return this.$store.getter.age
  },
  userInfo() {
    return this.$store.getter.userInfo
  }
}

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
  computed: mapState({
  
    // 传函数参数
    count: state => state.count, // 箭头函数可使代码更简练 映射为this.count
    userCount: state => state => state.user.count, // 模块化写法 箭头函数可使代码更简练 映射为this.userCount
    
    // 传字符串参数
    userName: 'name', // name等同于state => state.name，不支持模块化写法 映射为this.userName
    
    // 需要使用this局部状态，使用常规函数写法
    age(state) { // 映射为this.age
      return state.age + this.age // 可与局部状态组合
    }
  })
}

computed: mapState([
  'count', // 映射 this.count 为 store.state.count
  'name' // 映射 this.name为 store.state.name
])

computed: mapState('user', ['count', 'name']) // user 模块名称

computed: {
  ...mapState([
    'count', // 映射 this.count 为 store.state.count
    'name' // 映射 this.name为 store.state.name
  ]),
  // 局部组件计算属性
  localComputed () {},
}

computed: {
  ...mapGetters([
    'count', // 映射 this.count 为 store.getters.count
    'name' // 映射 this.name为 store.getters.name
  ]),
  // 局部组件计算属性
  localComputed () {},
}

...mapGetters('user', ['count', 'name']) // user 模块名称

this.$store.dispatch("test", "value")
this.$store.dispatch("user/test", "value") // user模块化， 第二个参数为传参

...mapActions([
    "test",
])
this.test('value')