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

Vuex是Vue.js的状态管理库，主要用于管理大型单页应用程序中的状态。在Vuex中，有两种方式可以在组件中获取Vuex中的状态：使用...mapState和...mapGetters方法。本文将详细讲解这两种方法的区别和用途。

...mapState

...mapState方法可以将Vuex中的状态映射到组件的计算属性中。它可以帮助我们在组件中访问Vuex状态，而无需在计算属性中编写大量的getter方法。下面是一个简单的示例：

// Vuex store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// Vue component
export default {
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}

在上面的示例中，我们使用了...mapState方法将Vuex的计数状态映射到组件中。我们可以像计算属性一样直接在组件中使用它。当我们在组件中调用increment方法时，它会调用commit方法来执行我们在mutations中定义的increment函数。

...mapState方法的用法也可以与对象语法一起使用，使用方式如下：

computed: {
  ...mapState({
    // 箭头函数可使代码更简洁
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

...mapGetters

...mapGetters方法可以让我们直接在Vue组件中获取Vuex中的getter方法。通常情况下，我们需要编写许多getter方法来访问和转换状态。而...mapGetters方法可以简化我们在组件中获取这些getter方法的代码。下面是一个简单的示例：

// Vuex store
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue.js', done: true },
      { id: 2, text: 'Learn Vuex', done: false },
      { id: 3, text: 'Learn Vue Router', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

// Vue component
export default {
  computed: {
    ...mapGetters([
      'doneTodosCount'
    ])
  }
}

在上面的示例中，我们使用了...mapGetters方法将doneTodosCount getter映射到组件中。这导致我们可以直接在组件中使用 this.doneTodosCount，而不需要编写getter方法来访问它。

...mapGetters方法的用法和...mapState相似，我们可以像下面的示例一样使用对象语法：

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

综上所述，我们可以看到...mapState和...mapGetters方法有不同的用途和语法。简单来说，...mapState方法用于映射state到组件的计算属性中，而...mapGetters方法用于将getter方法映射到组件的计算属性中。需要注意的是，当我们使用这些方法时，我们必须按照正确的方式使用this.$store和this来访问Vuex状态和计算属性。