vuex的語法糖-輔助函數mapState , mapMutations , mapActions , mapGetters

還不知道vue中vuex如何使用？點擊下面連接 連接:簡單demo詳細講解

• Demo Github地址 :github.com/babybrother…

複習vuex工做原理

graph LR
A[客戶端] -- 事件調用 dispatch --> B((Action))
C(State) -- state修改 render從新渲染 --> A
B -- commit一個type類型 --> D{Mutation}
D -- 匹配對應type操做state --> C
複製代碼

---

vuex五大核心 1.State 2.Getters 3.Mutations 4.Actions 5.Module 咱們項目中須要的都是：state、getters、mutations、actions裏面的東西 調用方法和使用的位置也是有區別的分別是 不過vuex給咱們提供了輔助函數：mapState , mapMutations , mapActions , mapGetters

調用	方法	輔助函數
state	this.$store.state. xxx	mapState
getters	this.$store.getters. xxx	mapGetters
mutations	this.$store.cmmit(（xxx）	mapMutations
actions	this.$store.dispatch（xxx ）	mapActions

==注意== mapState和mapGetter的使用只能在computed計算屬性中， mapMutations和mapActions使用的時候只能在methods中調用不然報錯

---

如何實際使用輔助函數？

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      counts:(state) => state.count
    }),
    //mapState就等於下面這個
    // counts(){
    //   return this.$store.state.count
    // },
    ...mapGetters({
      getternum:'doneTodos'
    }),
    //mapGetters就等於下面的這個
    // getternum(){
    //   return this.$store.getters.doneTodos
    // }

  },
  methods:{
    ...mapMutations({
      addnum:'addNum'
    }),
    addnum1(){
      this.addnum()
    },
    //mapMutations就等於下面的這個
    // addnum1(){
    //   this.$store.commit('addNum')
    // },
    
    ...mapActions({
      actionnum:'actionNumAdd'
    }),
    actionnum6(){
      this.actionnum()
    },
    //mapActions就等於下面的這個
    //  actionnum6(){
    //   this.$store.dispatch('actionNumAdd')
    // }
    
  }
}
</script>
複製代碼

---

輔助函數總結 vuex中的 mapState , mapMutations , mapActions , mapGetters 輔助函數 看上面的例子其實差很少， 當項目場景中咱們須要大量的調用state中的值和觸發多個actions的時候，咱們還得寫大量重複的代碼，這時候輔助函數的做用就體現出來了，其實就是vuex的一個語法糖，是代碼更簡潔更優雅。 深刻學習vuex狀態管理的拆分及模塊化處理

• 博客連接：blog.csdn.net/weixin_4364…

• 掘金連接：juejin.im/post/5dc394…

• Demo Github地址:github.com/babybrother…